Materi
Kadang dua komponen harus selalu berubah bersama. Contohnya kotak pencarian dan daftar produk: daftar menyaring menurut kata yang diketik di kotak. Bila kata itu disimpan di state kotak pencarian, daftar tidak bisa membacanya, karena state adalah milik privat komponennya.
Jalan keluarnya disebut mengangkat state: hapus state dari anak-anaknya, pindahkan ke induk terdekat yang membungkus keduanya, lalu kirim ke bawah lewat props. Anak yang perlu mengubah nilai itu menerima penangan dari induk, misalnya onUbah, dan memanggilnya alih-alih memanggil set sendiri.
function IsianJumlah({ label, nilai, onUbah }) {
return <label>{label} <input value={nilai} onChange={(e) => onUbah(e.target.value)} /></label>;
}
export default function Pesanan() {
const [jumlah, setJumlah] = useState("1");
return (
<>
<IsianJumlah label="Kasir" nilai={jumlah} onUbah={setJumlah} />
<IsianJumlah label="Dapur" nilai={jumlah} onUbah={setJumlah} />
</>
);
}Setelah state diangkat, anak menjadi komponen terkontrol: informasi pentingnya datang dari props, bukan dari state sendiri, sehingga induk menentukan perilakunya. Komponen yang menyimpan state sendiri disebut tidak terkontrol; lebih mudah dipakai, tetapi tidak bisa dikoordinasikan dengan komponen lain.
Setiap potong state punya satu pemilik, yang dalam dokumentasi React disebut satu sumber kebenaran. Komponen lain menerima nilainya lewat props, bukan menyimpan salinannya sendiri. Halaman yang lebih besar disusun dengan cara yang sama: komponen kecil yang menerima data dan penangan lewat props, digabung induk yang memegang state, dibantu komponen pembungkus yang menerima children.
