Menghantar State ke Komponen Anak dalam React

Katakan kita mempunyai array produk:

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

Katakan array ini terletak dalam komponen Products. Mari simpan produk-produk ini dalam state komponen:

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

Sekarang mari kita ulangi produk-produk dengan gelung dan paparkan mereka 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, kandungan gelung map kami cukup kompleks, terutamanya jika markup produk berkembang pada masa hadapan. Kerumitan sedemikian menyukarkan pembacaan, pemahaman dan penyenggaraan kod.

Adalah lebih baik untuk mengasingkan kod yang bertanggungjawab untuk memaparkan produk ke dalam komponen berasingan. Mari namakannya Product. Berikut adalah kod komponen kami:

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

Sekarang mari dalam komponen Products dalam gelung 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, kini kod gelung telah dipermudahkan dan menjadi lebih mudah difahami. Selain itu, kini paparan produk diurus oleh komponen berasingan, di mana kita boleh membuat, dan kemudian menyunting markup produk.

Dari segi teknikal, kita mempunyai situasi di mana komponen ibu bapa mempunyai state dengan data, dan komponen anak menerima data ini dalam bentuk props dan memaparkannya dengan cara yang kita kehendaki.

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 gelung dan paparkan semua pengguna pada skrin. Cipta komponen berasingan User untuk memaparkan pengguna.