Doorgeven van staten aan kindcomponenten in React

Stel dat we een array met producten hebben:

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

Stel dat deze array zich bevindt in de component Products. Laten we deze producten in de staat van de component opslaan:

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

Laten we nu de producten doorlopen met een lus en ze weergeven in een bepaalde opmaak:

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

Zoals je ziet, is de inhoud van onze map-lus vrij complex, vooral als de opmaak van het product in de toekomst uitgebreider wordt. Een dergelijke complexiteit bemoeilijkt het lezen, begrijpen en onderhouden van de code.

Het is beter om de code die verantwoordelijk is voor het weergeven van het product in een aparte component onder te brengen. Laten we deze Product noemen. Dit is de code van onze component:

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

Laten we nu binnen de component Products in de map-lus kindcomponenten Product gebruiken:

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

Zoals je ziet, is de code van de lus vereenvoudigd en beter te begrijpen geworden. Bovendien is er nu een aparte component verantwoordelijk voor het weergeven van het product, waarin we de opmaak van de producten kunnen maken en later bewerken.

Technisch gezien hebben we een situatie waarin de bovenliggende component een staat met gegevens heeft, en de onderliggende componenten deze gegevens ontvangen in de vorm van props en ze op de gewenste manier weergeven.

In de staat van de component Users is de volgende array gegeven:

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

Doorloop deze array met een lus en geef alle gebruikers weer op het scherm. Maak een aparte component User aan voor het weergeven van de gebruiker.