Transmiterea stărilor în componentele copil în React

Să presupunem că avem o matrice cu produse:

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

Să presupunem că această matrice este localizată în componenta Products. Să înregistrăm aceste produse în starea componentei:

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

Acum să iterăm prin produse cu bucla și să le afișăm într-o structură oarecare:

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

După cum vedeți, conținutul buclei noastre map este suficient de complex, mai ales dacă structura produsului va crește în viitor. O astfel de complexitate îngreunează citirea, înțelegerea și întreținerea codului.

Ar fi mai bine să mutați codul responsabil pentru afișarea produsului într-o componentă separată. Să o numim Product. Iată codul componentei noastre:

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

Acum să folosim în interiorul componentei Products în bucla map componentele copil 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>;
}

După cum vedeți, acum codul buclei a devenit mai simplu și mai ușor de înțeles. În plus, acum afișarea produsului este responsabilitatea unei componente separate, în care putem crea, apoi edita structura produselor.

Din punct de vedere tehnic, rezultă că componenta părinte are starea cu date, iar componentele copil primesc aceste date sub formă de props și le afișează în modul dorit de noi.

În starea componentei Users este dată următoarea matrice:

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

Iterați prin această matrice cu bucla și afișați toți utilizatorii pe ecran. Creați pentru afișarea utilizatorului o componentă separată User.