Prosleđivanje stanja (state) podređenim komponentama u React-u

Neka nam je dat niz sa proizvodima:

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

Neka se ovaj niz nalazi u komponenti Products. Upisaćemo ove proizvode u stanje komponente:

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

Sada hajde da prođemo kroz proizvode petljom i prikažemo ih u nekom izgledu:

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

Kao što vidite, sadržaj naše petlje map je prilično složen, posebno ako se izgled proizvoda proširi kasnije. Takva složenost otežava čitanje, razumevanje i održavanje koda.

Bilo bi bolje izdvojiti kod koji je odgovoran za prikaz proizvoda u zasebnu komponentu. Nazvaćemo je Product. Evo koda naše komponente:

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

Hajde da sada unutar komponente Products u petlji map koristimo podređene komponente 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>;
}

Kao što vidite, kod petlje se sada pojednostavio i postao razumljiviji. Osim toga, sada za prikaz proizvoda je odgovorna zasebna komponenta, u kojoj možemo da pravimo, a kasnije i uređujemo izgled proizvoda.

Tehnički, ispostavlja se da roditeljska komponenta ima stanje (state) sa podacima, a podređene komponente primaju te podatke u obliku props-a i prikazuju ih na način koji nama odgovara.

U stanju komponente Users dat je sledeći niz:

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

Prođite kroz ovaj niz petljom i prikažite sve korisnike na ekranu. Napravite zasebnu komponentu User za prikaz korisnika.