Sekarang untuk menampilkan daftar sasaran kami, di sini dalam tampilan, saya ingin hanya menampilkan beberapa komponen teks untuk saat ini di mana
saya cukup mencetak tujuan saya dan untuk itu, kita dapat memasukkan ekspresi dinamis di sini dengan kurung kurawal buka dan tutup tunggal dan sekarang
kita mengacu pada tujuan
kursus, yang merupakan variabel ini kita dapatkan di sini dengan array destructing. Sasaran kursus adalah serangkaian sasaran kami dan sekarang sama
seperti React normal yang
merupakan diferensiasi yang saya tidak terlalu suka karena kami menggunakan React normal di sini pada akhirnya,
jadi seperti yang
Anda tahu dari React untuk proyek web, Anda sekarang dapat memetakan larik data ini menjadi larik komponen
dengan metode peta yang merupakan metode Javascript normal. Metode peta mengambil fungsi yang mengeksekusi pada setiap item
dalam array, jadi di sini
kita mendapatkan
tujuan kita dan kemudian harus mengembalikan komponen baru di sini. Sekali lagi saya akan menggunakan sintaks fungsi panah inline di
mana alih-alih memiliki kurung kurawal dan kemudian mengembalikan sesuatu, saya menghilangkan kurung kurawal dan saya menghilangkan pernyataan
kembali, ini sintaksis Javascript yang valid, ini juga akan mengembalikan apa
pun yang saya masukkan di sini.
Apa yang ingin saya kembalikan adalah komponen teks, jadi komponen
teks ini kami impor dari React Native dan dengan ini, kami sekarang dapat menampilkan sasaran kami di sini karena sasaran dalam sasaran tentu saja akan menjadi
teks karena apa yang kami tambahkan ke sasaran kursus adalah tujuan yang dimasukkan dan tujuan yang dimasukkan adalah
apa yang kita dapatkan dari input teks dan itu hanya teks.
Jadi di sini, kami sekarang hanya mengeluarkan beberapa teks dan saya memetakan semua tujuan kursus saya menjadi
komponen teks yang akan ditampilkan dalam tampilan ini di sini. Dan dengan itu jika kita menyimpan ini, kita seharusnya
sudah dapat
mulai menambahkan beberapa tujuan, jadi belajar React Native adalah satu hal yang bisa saya masukkan di sini, tekan add
dan ini dia, pelajari
secara nyata dan kita dapatkan ini juga dan jika Anda juga ingin
membuat beberapa pancake, Anda dapat melakukannya juga dan tentu saja, ini juga berfungsi
di iOS, belajar React Native secara nyata dan tentu saja, saya masih ingin membuat beberapa pancake.
Jadi ini berfungsi dan ini adalah bagaimana kita dapat menampilkan daftar sederhana, daftar item yang sangat sepele di sini.
Sekarang tentu saja, barang-barang ini terlihat agak membosankan, jadi mungkin kita bisa menerapkan beberapa gaya di sana untuk
membuatnya terlihat lebih baik. Sebelum kita melakukan itu,
harap dicatat bahwa kita memiliki kesalahan di terminal kami.
Sekarang aplikasi kami jelas bekerja tetapi kesalahan yang kami dapatkan di sini adalah bahwa setiap anak dalam
daftar harus memiliki kunci prop yang unik dan itu adalah aturan Bereaksi normal, tidak ada Bereaksi spesifik Native.
Memang, Anda harus selalu, ketika memetakan ini ke daftar widget, tetapkan kunci di sini sehingga React dapat memperbarui daftar
ini secara efisien di belakang layar jika perlu. Anda melakukan ini dengan menambahkan prop kunci di sini dan
kemudian kunci tersebut harus berupa pengidentifikasi unik, untuk sekarang
mari kita pergi dengan tujuan itu sendiri yang tidak sepenuhnya unik, Anda dapat memasukkan tujuan
yang sama dengan teks yang sama dua kali yang akan memberi Anda kesalahan tetapi
untuk sekarang mari kita asumsikan Anda tidak
melakukan itu, karena itu kami dapat menggunakan sasaran sebagai kunci dan jika kami melakukannya, kami menyingkirkan peringatan itu.
Jika sekarang saya belajar Bereaksi Asli, saya dapat menambahkan ini tanpa kesalahan.
Sekali lagi jika saya menambahkan teks yang sama dua kali, maka secara teknis saya bahkan tidak mendapatkan kesalahan di sini tapi
ini
akan salah, ini dia, ini kesalahan karena saya punya dua anak dengan kunci yang sama.
Jadi, untuk saat ini kami hanya akan berasumsi bahwa Anda
tidak melakukan itu, itu adalah aturan kunci normal yang Anda miliki dalam React yang normal juga.
Jadi anggap saja Anda tidak memasukkan tujuan yang sama dua kali dan mari kita lanjutkan merancang item-item ini
karena saat ini, mereka tidak terlihat terlalu menarik.