Mata Kuliah Lab Pemrograman • Bisnis Digital
State & Props di React Native
Pertemuan 5 — Penerapan Konsep State dan Props untuk Aplikasi Interaktif Bagaimana aplikasi mobile bisa "mengingat" isi keranjang belanja dan "mengoper" data harga antar-layar. Hari ini kita bongkar dua konsep fondasi React Native: state (memori komponen) dan props (kiriman data antar-komponen).
RPS MINGGU 5 • DURASI 2 × 50 MENIT
Selamat datang kembali, Anda sudah melewati tiga pertemuan yang membangun komponen statis dengan HTML, CSS, JavaScript, lalu menyambungkannya ke script Python sederhana. Hari ini kita naik satu level: aplikasi yang benar-benar "hidup" dan merespons sentuhan pengguna, seperti tombol tambah ke keranjang di aplikasi Tokopedia atau tombol suka di Instagram. Dua konsep yang akan Anda kuasai adalah state, yaitu data yang bisa berubah dan diingat oleh sebuah komponen, dan props, yaitu data yang dikirim dari komponen induk ke komponen anak. Siapkan laptop dan Expo Go Anda karena kita akan langsung praktik dengan contoh kasus toko UMKM digital. Tujuan Pembelajaran Hari Ini Melanjutkan komponen React Native dari Pertemuan 3 dan integrasi Python dari Pertemuan 4, hari ini Anda akan membuat komponen yang benar-benar interaktif :
CAPAIAN 1 — STATE
MENGELOLA STATE
Memahami konsep state sebagai "memori" komponen dan menerapkan useState untuk membuat tampilan yang berubah otomatis.
CAPAIAN 2 — PROPS
MENGOPER PROPS
Memahami konsep props untuk mengirim data dari komponen induk ke komponen anak agar aplikasi mudah dipakai ulang.
Sub-CPMK Minggu 5: mahasiswa mampu menerapkan konsep state dan props dalam React Native untuk membangun aplikasi interaktif sederhana.
Sebelum masuk ke kode, mari Anda samakan ekspektasi hari ini. Ada dua capaian yang saling melengkapi: pertama, Anda akan bisa membuat komponen yang mengingat datanya sendiri menggunakan state, misalnya jumlah barang di keranjang. Kedua, Anda akan bisa mengirim data itu ke komponen lain menggunakan props, misalnya mengirim nama dan harga produk dari daftar produk ke kartu produk. Bayangkan aplikasi katalog UMKM sederhana yang akan kita bangun bertahap sampai Pertemuan 12 nanti — hari ini adalah fondasi interaktivitasnya. Catat baik-baik karena konsep ini akan terus dipakai di halaman login, navigasi, dan integrasi API pada pertemuan-pertemuan berikutnya. Bagian 1 dari 3
Mengapa Aplikasi Butuh "Memori"?
Dari tampilan statis (poster) menuju tampilan yang berubah sesuai interaksi pengguna (dashboard hidup).
Coba Anda bayangkan dua jenis aplikasi: yang pertama seperti brosur digital, isinya tidak pernah berubah walau Anda sentuh berkali-kali. Yang kedua seperti aplikasi GoFood, di mana setiap kali Anda menekan tombol tambah, angka jumlah pesanan langsung bertambah di layar. Perbedaan mendasarnya ada pada konsep yang disebut state. Pada bagian ini Anda akan memahami mengapa komponen React Native butuh "mengingat" sesuatu, dan bagaimana React Native tahu kapan harus menggambar ulang tampilan. Setelah bagian ini selesai, Anda akan siap menulis baris kode useState pertama Anda. Analogi: Kertas vs Papan Tulis TAMPILAN STATIS
KERTAS CETAK
Teks di kertas tidak bisa diubah setelah dicetak. Ini seperti komponen React Native yang isinya hardcode (ditulis tetap, tidak berubah).
TAMPILAN INTERAKTIF
PAPAN TULIS
Anda bisa menghapus dan menulis ulang angka di papan tulis kapan saja. Ini seperti komponen yang punya state — nilainya bisa diperbarui, dan tampilan otomatis ikut berubah.
Glosarium — state: data internal milik sebuah komponen yang nilainya dapat berubah selama aplikasi berjalan, dan setiap kali berubah, React Native menggambar ulang (re-render) tampilan yang bergantung padanya.
Analogi ini penting karena Anda belum pernah menyentuh pemrograman sebelumnya. Kertas cetak menggambarkan variabel biasa: sekali ditulis di kode, angka atau teksnya tidak akan berubah walau pengguna menekan tombol berkali-kali. Papan tulis menggambarkan state: nilainya bisa dihapus dan ditulis ulang, dan yang istimewa dari React Native adalah setiap kali papan tulis itu berubah, layar aplikasi otomatis ikut memperbarui tampilannya tanpa Anda harus menyuruhnya secara manual. Contoh nyata di sekitar Anda adalah jumlah "like" di Instagram yang bertambah begitu Anda menekan ikon hati, atau saldo poin di aplikasi member Alfamart yang berubah setelah transaksi. Nanti Anda akan mempraktikkan hal yang sama pada studi kasus keranjang belanja UMKM. Mengenal Hook useState React Native menyediakan fungsi bawaan bernama useState untuk membuat dan mengelola state di dalam sebuah komponen.
// Mengimpor useState dari React import { useState } from 'react' ;// Membuat state bernama "jumlah", nilai awal 0 const [jumlah, setJumlah] = useState (0);
jumlah
Variabel yang menyimpan nilai state saat ini — dibaca untuk ditampilkan di layar.
setJumlah
Fungsi khusus untuk mengubah nilai state . Memanggil ini memicu React Native menggambar ulang tampilan.
Perhatikan baris kode ini pelan-pelan bersama Anda. useState adalah sebuah "hook", istilah untuk fungsi bawaan React yang bisa Anda "colok" ke dalam komponen. Ia mengembalikan dua hal sekaligus dalam tanda kurung siku: yang pertama adalah nilai state itu sendiri, dalam contoh ini kita menamainya jumlah, dan yang kedua adalah fungsi untuk mengubahnya, yang kita namai setJumlah. Angka nol di dalam kurung useState adalah nilai awal — sama seperti papan tulis yang baru pertama kali ditulis angka nol. Aturan pentingnya, Anda tidak boleh mengubah jumlah secara langsung, Anda wajib memanggil setJumlah agar React Native tahu harus menggambar ulang layar. State dalam Komponen Tombol Berikut komponen tombol "Tambah ke Keranjang" lengkap dengan state-nya:
function TombolKeranjang () {const [jumlah, setJumlah] = useState (0);return ("Tambah" onPress={() => setJumlah (jumlah + 1)} />
Glosarium — onPress: properti bawaan komponen Button di React Native yang menjalankan fungsi tertentu setiap kali pengguna menyentuh tombol tersebut.
Mari Anda telusuri kode ini baris demi baris seperti resep masakan. Baris pertama membuat state jumlah dengan nilai awal nol. Bagian Text menampilkan nilai jumlah saat ini di layar, diapit kurung kurawal karena kita menyisipkan variabel ke dalam teks. Bagian Button punya properti onPress, yaitu perintah yang dijalankan setiap kali pengguna menekan tombol — di sini perintahnya adalah memanggil setJumlah dengan nilai jumlah ditambah satu. Inilah siklus lengkapnya: sentuh tombol, setJumlah dipanggil, React Native mendeteksi state berubah, lalu Text digambar ulang dengan angka baru. Pada slide berikutnya kita akan menghitung manual proses ini langkah demi langkah. Coba Sendiri: Kenapa Angkanya Tidak Berubah di Layar? Satu tombol menaikkan dua penghitung sekaligus — yang kiri variabel biasa, yang kanan useState. Perhatikan mana yang benar-benar berubah di layar.
Silakan Anda tekan tombol tambah beberapa kali dan bandingkan dua kolom di layar. Nilai di memori JavaScript naik di kedua kolom — penambahannya sendiri sebenarnya berhasil. Tetapi angka besar yang dilihat pengguna hanya berubah di kolom kanan, karena hanya setJumlah yang memberi tahu React Native untuk menggambar ulang tampilan. Perhatikan juga penghitung render: kolom kiri tetap satu kali, kolom kanan bertambah setiap kali tombol ditekan. Inilah kesalahpahaman pertama hampir semua pemula React: mengubah variabel bukan berarti mengubah tampilan. Tekankan ke mahasiswa bahwa setJumlah bukan sekadar cara lain menulis tanda sama dengan — ia menyimpan nilai baru sekaligus menjadwalkan render ulang. Kalau nanti aplikasi mereka terlihat "macet" padahal datanya benar, kemungkinan besar mereka lupa memakai fungsi setter ini. Hitung dari Nol: Simulasi Klik Tombol Pengguna toko UMKM menekan tombol "Tambah ke Keranjang" beberapa kali. Mari lacak nilai state jumlah setelah tiap aksi.
Langkah Perhitungan Nilai jumlah Render awal (useState(0)) nilai awal 0 Klik tombol 1x 0 + 1 1 Klik tombol lagi 2x berturut-turut 1 + 1 + 1 3 Klik tombol 1x terakhir 3 + 1 4
HASIL AKHIR TAMPILAN
Keranjang: 4
4 kali setJumlah dipanggil = 4 kali komponen digambar ulang
Latihan ini melatih Anda berpikir seperti mesin React Native — melacak nilai state di setiap perubahan, persis seperti Anda menghitung sisa saldo e-wallet GoPay setelah beberapa kali transaksi. Perhatikan setiap klik hanya menambahkan satu ke nilai sebelumnya, tidak pernah mengulang dari nol, karena setJumlah selalu membaca nilai jumlah yang terkini. Setelah empat kali klik total, tampilan akhirnya menunjukkan angka 4, dan artinya komponen ini telah digambar ulang oleh React Native sebanyak empat kali juga. Kalau Anda bingung di titik mana state berubah, coba tunjuk baris kode setJumlah pada slide sebelumnya dan hubungkan dengan baris tabel yang sesuai. Walkthrough: Tombol "Suka" Dua Kondisi Tidak semua state berupa angka. State juga bisa berupa true/false (boolean), misalnya status disukai atau tidak — seperti tombol hati di Instagram.
const [disukai, setDisukai] = useState (false );"♥ Disukai" : "♡ Suka" } onPress={() => setDisukai (!disukai)} />
SEBELUM DITEKAN
disukai = false → tombol menampilkan teks "Suka" biasa.
SETELAH DITEKAN
setDisukai(!disukai) membalik nilai → disukai = true → tombol berubah jadi "Disukai".
Konsep ini sama pentingnya dengan penghitung angka tadi, hanya saja nilainya bukan angka melainkan benar atau salah. Tanda seru sebelum disukai artinya "kebalikan dari" — jika sebelumnya false ia menjadi true, dan sebaliknya. Pola inilah yang dipakai hampir semua tombol suka atau tombol tandai favorit di aplikasi belanja seperti Shopee, di mana ikon hati berubah warna begitu Anda tekan sekali, dan kembali normal saat Anda tekan lagi. Saya sengaja tidak memberi animasi fragment pada slide ini karena kita akan langsung mempraktikkannya bersama di Expo Go setelah ini — silakan siapkan editor kode Anda. Coba Sendiri: Satu Nilai Boolean, Dua Wajah Tombol Nyalakan-matikan tiga state boolean dan amati satu kartu produk berubah wajah: ikon hati, label, spinner, sampai tombol beli yang ikut mati.
Minta mahasiswa mencoba tiga sakelar ini satu per satu, lalu kombinasinya. Saat disukai dinyalakan, ikon hati terisi dan labelnya berubah — persis pola ternary yang baru kita bahas di slide sebelumnya. Saat stokHabis atau sedangMemuat menyala, tombol beli otomatis redup dan tidak bisa ditekan, karena disabled dihitung dari ekspresi stokHabis atau sedangMemuat. Arahkan perhatian mereka ke baris JSX di bawah sakelar: bagian yang sedang bernilai benar disorot, sehingga terlihat cabang mana yang sedang dipakai React Native. Tabel kebenaran di sisi kanan menandai kombinasi yang sedang berlaku — ini melatih logika boolean sekaligus. Pelajaran intinya, satu nilai boolean bisa mengendalikan teks, warna, dan bisa-tidaknya tombol ditekan sekaligus, jadi kondisi antarmuka sebaiknya diturunkan dari state, bukan diatur manual satu per satu seperti mengecat papan reklame. Bagian 2 dari 3
Props — Mengirim Data Antar-Komponen
Jika state adalah memori milik satu komponen, props adalah "amplop data" yang dikirim dari komponen induk ke komponen anak.
Sejauh ini komponen Anda hanya mengingat datanya sendiri. Tapi aplikasi nyata seperti katalog produk UMKM punya puluhan kartu produk dengan nama dan harga berbeda-beda — tidak mungkin Anda menulis ulang kode kartu produk satu per satu. Di sinilah props berperan, memungkinkan satu komponen kartu dipakai berulang kali dengan data yang berbeda setiap kali dipanggil. Anggap saja props seperti mengisi formulir template undangan pernikahan: templatenya satu, tapi nama tamu dan tanggal acara di setiap amplop bisa berbeda. Mari kita bedah konsepnya di slide berikutnya. Apa Itu Props? Props (kependekan dari properties ) adalah data yang dikirim dari komponen induk (parent) ke komponen anak (child), mirip parameter pada sebuah fungsi.
ANALOGI FORMULIR TEMPLATE
Komponen KartuProduk adalah templatenya (sekali dibuat). Setiap kali dipakai, Anda cukup mengisi "amplop" props yang berbeda: nama produk, harga, dan gambar — tanpa menulis ulang kode kartunya.
Glosarium — komponen induk/anak: komponen induk (parent) adalah komponen yang memanggil dan membungkus komponen lain; komponen anak (child) adalah komponen yang dipanggil dan menerima data dari induknya.
Bedanya dengan state harus jelas di kepala Anda: state adalah data yang dimiliki dan diubah oleh komponen itu sendiri, sedangkan props adalah data yang diterima dari luar dan sifatnya hanya dibaca, tidak boleh diubah oleh komponen anak. Contoh paling dekat dengan keseharian Anda adalah daftar produk di aplikasi Tokopedia: satu komponen kartu produk dipakai berulang-ulang, tapi tiap kartu menampilkan nama, harga, dan foto yang berbeda karena datanya dikirim lewat props dari daftar produk sebagai induknya. Bayangkan kalau tanpa props, Anda harus menulis kode kartu produk baru untuk tiap satu dari seratus produk UMKM — jelas tidak efisien. Mengirim dan Menerima Props // Komponen anak: menerima props lewat parameter function KartuProduk (props) {return <Text>{props.nama} - Rp{props.harga}</Text>;// Komponen induk: mengirim props saat memanggil "Kaos UMKM" harga={75000} />
Perhatikan atribut nama dan harga di komponen induk — keduanya masuk ke dalam objek props di komponen anak, diakses dengan props.nama dan props.harga.
Perhatikan bahwa KartuProduk menerima satu parameter bernama props, sebuah "wadah" berisi semua data yang dikirim komponen induk. Di komponen induk, setiap atribut yang Anda tulis — nama dan harga — otomatis masuk ke dalam wadah props tersebut. Ini mirip seperti Anda mengisi data pengiriman di aplikasi JNE: nama penerima dan alamat adalah "props" yang dikirim ke sistem pengiriman, dan sistem pengiriman itu sendiri tidak mengubah nama atau alamat tersebut, hanya membacanya untuk mencetak label. Aturan emasnya: komponen anak hanya boleh membaca props, tidak boleh mengubahnya — kalau ada data yang perlu diubah, itu tandanya harus jadi state, bukan props. Props vs State: Kapan Pakai Yang Mana? STATE
Dimiliki oleh komponen itu sendiri Bisa diubah lewat fungsi setJumlah/sejenisnya Perubahan memicu render ulang Contoh: jumlah item di keranjang PROPS
Dikirim dari komponen induk Hanya dibaca, tidak boleh diubah komponen anak Berubah jika induk mengirim data baru Contoh: nama dan harga produk pada kartu Tabel perbandingan ini adalah rangkuman yang paling sering ditanyakan mahasiswa baru React Native, jadi mari kita pastikan Anda benar-benar paham bedanya. Aturan sederhananya begini: jika data itu perlu berubah karena aksi pengguna di komponen yang sama, gunakan state; jika data itu datang dari luar dan hanya untuk ditampilkan, gunakan props. Contohnya, jumlah "like" yang bertambah saat Anda menekan ikon hati adalah state, sedangkan nama akun pemilik unggahan yang tampil di atas foto adalah props yang dikirim dari data unggahan. Nanti dalam studi kasus katalog UMKM kita, kedua konsep ini akan dipakai bersamaan — harga produk lewat props, jumlah yang dipilih pembeli lewat state. Coba Sendiri: Ini Props atau State? Delapan data dari aplikasi toko UMKM menunggu dipilah. Pakai dua pertanyaan kunci: berubah karena aksi di komponen ini? Datang dari induk?
Latihan klasifikasi ini menguji pemahaman tabel perbandingan yang baru saja kita bahas. Ajak mahasiswa memilah delapan kartu data satu per satu: harga satuan dari daftar produk jelas props karena dikirim induk dan hanya dibaca, sedangkan jumlah di keranjang jelas state karena berubah saat tombol tambah ditekan di dalam kartu itu sendiri. Kartu yang paling sering menjebak adalah daftar kategori dari server — terasa seperti "data dari luar", padahal layar inilah yang mengambil dan menyimpannya lewat setKategori, jadi ia state. Setiap jawaban salah memunculkan alasan satu kalimat, jadi biarkan mahasiswa salah dulu dan membaca alasannya. Tutup dengan aturan ringkas di akhir: datang dari luar dan tidak diubah sendiri berarti props; berubah karena interaksi di komponen ini berarti state. Kekeliruan memilah di sinilah akar dua bug klasik pekan-pekan awal: anak menulis ke props, atau satu data disalin jadi dua state. Hitung dari Nol: Total Harga via Props + State Kartu produk "Kaos UMKM" menerima harga satuan lewat props , sedangkan kuantitas dipilih lewat state . Mari hitung totalnya.
Langkah Perhitungan Nilai Harga satuan (props.harga) diterima dari induk Rp 75.000 Kuantitas awal (useState(1)) nilai awal 1 Pembeli klik "+" 2 kali 1 + 1 + 1 3 Total harga 75.000 × 3 Rp 225.000
TOTAL DI KERANJANG
Rp 225.000
props.harga (tetap) × state kuantitas (berubah)
Latihan ini menggabungkan dua konsep sekaligus, sama seperti transaksi nyata di aplikasi kasir UMKM seperti Moka POS: harga barang sudah ditetapkan dan tidak berubah selama transaksi, itulah props, sedangkan jumlah barang yang dibeli bisa ditambah pembeli kapan saja, itulah state. Perhatikan harga satuan tetap Rp 75.000 di setiap baris karena ia berasal dari props dan tidak pernah diubah oleh komponen kartu. Yang berubah hanya kuantitas, dari 1 menjadi 3 setelah dua kali klik tombol tambah, dan total akhirnya dihitung ulang otomatis setiap kali state kuantitas berubah. Coba Anda hitung sendiri, jika pembeli klik "+" satu kali lagi, berapa total harganya? Coba Sendiri: Simulasikan useState dan Props Ubah props harga dan klik tombol tambah kuantitas, lalu amati kapan komponen benar-benar render ulang.
Minta satu mahasiswa maju dan klik tombol tambah beberapa kali, lalu tanyakan ke kelas bagian mana yang berubah di layar dan bagian mana yang tetap. Coba juga ubah nilai props dari luar dan perhatikan bahwa itu tidak bisa diubah dari dalam komponen, berbeda dengan state yang bisa diubah kapan saja oleh komponennya sendiri. Tekankan bahwa setiap kali setQty dipanggil, React menjadwalkan render ulang komponen ini, bukan mengubah nilai secara diam-diam di memori. Sekarang mari kita lihat studi kasus lengkap kartu produk katalog UMKM yang menggabungkan keduanya. Studi Kasus: Kartu Produk Katalog UMKM function KartuProduk (props) {const [qty, setQty] = useState (1);return ("+" onPress={() => setQty (qty + 1)} />
props.nama dan props.harga datang dari luar (tetap selama kartu ini tampil); qty adalah state milik kartu ini sendiri (berubah saat tombol ditekan).
Inilah komponen lengkap yang menjawab pertanyaan besar hari ini: bagaimana state dan props bekerja bersama dalam satu komponen nyata. Props nama dan harga masuk dari komponen induk saat kartu ini dipanggil, sedangkan state qty diciptakan dan diubah sendiri oleh kartu ini setiap kali tombol tambah ditekan. Total harga yang ditampilkan, props.harga dikalikan qty, otomatis diperbarui setiap kali salah satu dari keduanya berubah. Bayangkan Anda memakai komponen KartuProduk ini berulang-ulang untuk seratus produk berbeda di katalog toko kerajinan Batik Semarangan — cukup ganti nilai props nama dan harga di setiap pemanggilan, kode kartunya sendiri tidak perlu ditulis ulang sama sekali. Alur Data: Props Turun, Aksi Naik Komponen Induk DaftarProduk Komponen Anak KartuProduk props (nama, harga) onPress (aksi pengguna) State qty milik KartuProduk sendiri Pola ini disebut "props turun, aksi naik" (props down, actions up) — prinsip dasar arsitektur React yang menjaga alur data tetap mudah dilacak.
Diagram ini merangkum seluruh materi hari ini dalam satu gambar, jadi mohon perhatikan alur panahnya baik-baik. Panah tebal ke kanan menunjukkan props mengalir turun dari komponen induk DaftarProduk ke komponen anak KartuProduk, membawa data nama dan harga. Panah putus-putus ke kiri menunjukkan aksi pengguna, seperti sentuhan tombol, yang bisa memicu fungsi di komponen induk melalui props berupa fungsi. Sementara itu, kotak state qty di bagian bawah adalah murni milik KartuProduk sendiri, tidak pernah dikirim ke induknya. Pola "props turun, aksi naik" ini akan terus Anda temui sampai pertemuan integrasi REST API nanti, jadi biasakan membaca diagram semacam ini sejak sekarang. Coba Sendiri: Props Turun, Aksi Naik Tekan + pada kartu anak dan ikuti panahnya: aksi naik dulu ke induk lewat onTambah, baru data turun kembali ke kedua anak sebagai props.
Diagram statis tadi sekarang bisa Anda mainkan. Tekan tombol tambah pada salah satu kartu dan minta mahasiswa mengamati urutannya: angka di kartu tidak langsung berubah — panah putus-putus naik dulu ke Keranjang membawa panggilan onTambah, induk memperbarui state-nya, baru props jumlah mengalir turun ke kedua anak dan angkanya berubah. Perhatikan penghitung render: sekali siklus, render induk dan render kedua anak sama-sama bertambah, karena render induk menular ke anak-anaknya. Coba juga sakelar "ubah props langsung di anak" — muncul tanda silang dan pesan bahwa props hanya-baca; layar tidak berubah dan induk tidak pernah tahu, persis kesalahan kasir yang mencoret label harga di rak. Pelajaran intinya: data mengalir satu arah, anak melapor lewat fungsi, bukan mengubah milik induk. Pola ini akan terus dipakai sampai integrasi REST API nanti, jadi pastikan alurnya benar-benar terbayang. Kesalahan Umum Pemula KESALAHAN 1
Mengubah state langsung tanpa memanggil fungsi setter, misalnya menulis jumlah = jumlah + 1. React Native tidak akan tahu ada perubahan dan tampilan tidak ter-render ulang.
KESALAHAN 2
Mengubah props di komponen anak , misalnya props.harga = 0. Props bersifat hanya-baca (read-only) — kalau perlu diubah, nilainya harus jadi state.
Ingat: state = milik sendiri & boleh diubah lewat setter; props = titipan dari induk & hanya boleh dibaca.
Dua kesalahan ini adalah penyebab paling umum aplikasi mahasiswa "tidak responsif" saat praktik minggu-minggu awal, jadi mari Anda catat baik-baik. Kesalahan pertama sering terjadi karena kebiasaan menulis variabel biasa di JavaScript — Anda mengira cukup menimpa nilainya langsung, padahal React Native butuh dipanggil lewat fungsi setter agar ia tahu harus menggambar ulang layar. Kesalahan kedua terjadi ketika mahasiswa mencoba "memperbaiki" data props di dalam komponen anak, misalnya mengubah harga langsung di kartu produk — ini seperti mencoret label harga di rak minimarket, bukan wewenang kasir untuk melakukannya di tempat itu. Kalau nanti Anda menemukan tampilan yang "macet" tidak mau berubah, cek dulu apakah Anda lupa memanggil fungsi setter. Latihan Praktik (30 Menit) Buat komponen KartuProduk untuk katalog UMKM pilihan Anda sendiri (kerajinan, kuliner, atau fesyen) dengan ketentuan berikut:
Terima props : nama dan harga produk dari komponen induk. Buat state qty dengan nilai awal 1, lengkap dengan tombol "+" dan "−". Tampilkan total harga = props.harga * qty, dan pastikan angka tidak boleh kurang dari 1. Panggil komponen ini 3 kali di komponen induk dengan data produk berbeda-beda. Kerjakan berpasangan di Expo Go. Dosen akan berkeliling untuk memeriksa hasil dan menjawab pertanyaan.
Sekarang giliran Anda mempraktikkan langsung apa yang sudah kita bahas, jadi silakan buka editor kode dan Expo Go di ponsel Anda. Latihan ini sengaja dirancang mirip dengan kasus toko kerajinan atau kuliner UMKM yang sudah kita bahas sepanjang pertemuan, supaya Anda terbiasa memetakan masalah bisnis nyata ke dalam kode. Perhatikan syarat "angka tidak boleh kurang dari satu" — ini melatih Anda menambahkan sedikit logika kondisi di dalam fungsi setter, sesuatu yang akan sering Anda pakai nanti. Saya akan berkeliling ruangan selama tiga puluh menit ke depan, jangan ragu memanggil saya kalau komponen Anda belum mau menggambar ulang tampilannya. Rangkuman Konsep Kunci STATE
MEMORI KOMPONEN
Dibuat dengan useState, diubah lewat fungsi setter, memicu render ulang otomatis.
PROPS
KIRIMAN DATA
Dikirim dari induk ke anak lewat atribut, hanya-baca, membuat komponen bisa dipakai berulang.
Kombinasi state + props adalah fondasi semua interaktivitas React Native — dari tombol suka, keranjang belanja, sampai formulir login yang akan Anda bangun pertemuan depan.
Sebelum kita tutup, mari Anda rangkum sendiri dalam satu kalimat: state adalah data yang komponen ingat dan ubah sendiri, props adalah data titipan dari komponen induk yang hanya boleh dibaca. Kedua konsep ini terlihat sederhana di atas kertas, tapi begitu Anda kombinasikan keduanya seperti pada kartu produk tadi, Anda sudah punya fondasi untuk membangun hampir semua fitur interaktif aplikasi mobile. Konsep yang sama akan Anda pakai lagi minggu depan saat membuat halaman login — kolom input akan memakai state untuk mengingat ketikan pengguna, sementara pesan validasi bisa dikirim lewat props ke komponen lain. Pastikan Anda benar-benar nyaman dengan dua konsep ini sebelum lanjut, karena semua materi berikutnya dibangun di atasnya. Bagian 3 dari 3 • Pratinjau
Menuju Pertemuan 6: Halaman Login Interaktif
State akan Anda pakai untuk mengingat ketikan pengguna di kolom email dan kata sandi, lengkap dengan validasi dan pengamanan dasar.
Minggu depan kita akan langsung menerapkan state dan props pada kasus yang lebih kompleks: halaman login. Anda akan belajar menggunakan state untuk menyimpan apa yang diketik pengguna di kolom email dan kata sandi secara real-time, lalu menambahkan validasi sederhana seperti memeriksa format email atau panjang minimum kata sandi sebelum tombol masuk bisa ditekan. Bayangkan halaman login aplikasi BCA mobile atau Gojek — semua kolom input itu memakai state persis seperti yang Anda pelajari hari ini. Pastikan Anda sudah percaya diri dengan useState sebelum pertemuan berikutnya, karena kita akan langsung bergerak lebih cepat. Penutup & Tugas Mandiri Selesaikan komponen KartuProduk dari latihan praktik, unggah ke repository proyek masing-masing. Uji coba: tambahkan satu props baru (misalnya stok) dan tampilkan di kartu. Baca ulang glosarium state vs props sebagai bekal Pertemuan 6. Ada pertanyaan tentang state, props, atau error kode Anda? Silakan diskusikan sekarang atau bawa ke sesi konsultasi.
Terima Kasih atas partisipasi aktif Anda hari ini, terutama saat mencoba sendiri komponen KartuProduk tadi. Sebelum pertemuan berikutnya, pastikan Anda menyelesaikan latihan dan mengunggahnya ke repository proyek masing-masing agar bisa kita bahas kalau ada kendala. Cobalah juga tantangan tambahan menambahkan props baru seperti stok barang, karena ini akan melatih kepekaan Anda membedakan data mana yang seharusnya jadi props dan mana yang sebaiknya jadi state. Kalau ada bagian yang masih membingungkan, terutama soal kapan menggunakan state versus props, jangan sungkan bertanya sekarang selagi contoh kasus UMKM-nya masih segar di ingatan Anda.