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

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.

Bagian 1 dari 3

Mengapa Aplikasi Butuh "Memori"?

Dari tampilan statis (poster) menuju tampilan yang berubah sesuai interaksi pengguna (dashboard hidup).

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.

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.

State dalam Komponen Tombol

Berikut komponen tombol "Tambah ke Keranjang" lengkap dengan state-nya:

function TombolKeranjang() {
  const [jumlah, setJumlah] = useState(0);

  return (
    <View>
      <Text>Keranjang: {jumlah}</Text>
      <Button title="Tambah" onPress={() => setJumlah(jumlah + 1)} />
    </View>
  );
}

Glosarium — onPress: properti bawaan komponen Button di React Native yang menjalankan fungsi tertentu setiap kali pengguna menyentuh tombol tersebut.

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

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);
<Button title={disukai ? "♥ 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".

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.

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.

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
<KartuProduk nama="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.

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

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)

Coba Sendiri: Simulasikan useState dan Props

Ubah props harga dan klik tombol tambah kuantitas, lalu amati kapan komponen benar-benar render ulang.

Studi Kasus: Kartu Produk Katalog UMKM

function KartuProduk(props) {
  const [qty, setQty] = useState(1);
  return (
    <View>
      <Text>{props.nama} - Rp{props.harga * qty}</Text>
      <Button title="+" onPress={() => setQty(qty + 1)} />
    </View>
  );
}

props.nama dan props.harga datang dari luar (tetap selama kartu ini tampil); qty adalah state milik kartu ini sendiri (berubah saat tombol ditekan).

Alur Data: Props Turun, Aksi Naik

Pola ini disebut "props turun, aksi naik" (props down, actions up) — prinsip dasar arsitektur React yang menjaga alur data tetap mudah dilacak.

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.

Latihan Praktik (30 Menit)

Buat komponen KartuProduk untuk katalog UMKM pilihan Anda sendiri (kerajinan, kuliner, atau fesyen) dengan ketentuan berikut:

Instruksi

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.

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.

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.

Penutup & Tugas Mandiri

Tugas Sebelum Pertemuan 6

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.