Meneruskan State ke Komponen Anak di React

Misalkan kita memiliki array produk:

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

Misalkan array ini berada di dalam komponen Products. Mari simpan produk-produk ini ke dalam state komponen:

function Products() {
	const [prods, setProds] = useState(initProds);
}

Sekarang mari kita ulangi produk-produk dengan loop dan tampilkan dalam beberapa markup:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

Seperti yang Anda lihat, isi dari loop map kita cukup kompleks, terutama jika markup produk nantinya berkembang. Kompleksitas seperti ini menyulitkan pembacaan, pemahaman, dan pemeliharaan kode.

Akan lebih baik untuk memisahkan kode yang bertanggung jawab untuk menampilkan produk ke dalam komponen terpisah. Mari kita beri nama Product. Berikut kode komponen kita:

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

Sekarang mari di dalam komponen Products pada loop map kita gunakan komponen anak Product:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Seperti yang Anda lihat, kode loop sekarang menjadi lebih sederhana dan lebih mudah dipahami. Selain itu, sekarang untuk menampilkan produk menjadi tanggung jawab komponen terpisah, di mana kita dapat membuat, lalu mengedit markup produk.

Secara teknis, yang terjadi adalah komponen induk memiliki state dengan data, sedangkan komponen anak menerima data ini dalam bentuk props dan menampilkannya dengan cara yang kita inginkan.

Dalam state komponen Users diberikan array berikut:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

Ulangi array ini dengan loop dan tampilkan semua pengguna di layar. Buatlah untuk menampilkan pengguna komponen terpisah User.