Oordrag van state na kind-komponente in React

Laat ons 'n array met produkte hê:

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

Laat hierdie array in die komponent Products geleë wees. Laat ons hierdie produkte in die staat van die komponent stoor:

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

Laat ons nou die produkte met 'n lus herhaal en hulle in 'n opmaak uitskryf:

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>;
}

Soos jy kan sien, is die inhoud van ons map-lus redelik kompleks, veral as die opmaak van die produk later groter word. Sulke kompleksiteit maak die lees, begrip en onderhoud van die kode moeiliker.

Dit sal beter wees om die kode wat vir die vertoning van die produk verantwoordelik is, in 'n aparte komponent te plaas. Kom ons noem dit Product. Hier is die kode van ons komponent:

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

Laat ons nou binne die komponent Products in die map-lus kind-komponente Product gebruik:

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>;
}

Soos jy kan sien, het die kode van die lus nou vereenvoudig en meer verstaanbaar geword. Boonop word die vertoning van die produk nou deur 'n aparte komponent hanteer, waarin ons die produkopmaak kan doen en later kan redigeer.

Tegnies het ons nou dat die ouer- komponent 'n staat met data het, en die kind- komponente ontvang hierdie data as props en vertoon dit op die manier wat ons benodig.

In die staat van die komponent Users word die volgende array gegee:

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},
];

Herhaal hierdie array met 'n lus en vertoon alle gebruikers op die skerm. Skep 'n aparte komponent User vir die vertoning van 'n gebruiker.