Passaggio degli stati ai componenti figli in React

Supponiamo di avere un array di prodotti:

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

Supponiamo che questo array si trovi nel componente Products. Memorizziamo questi prodotti nello stato del componente:

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

Ora iteriamo sui prodotti con un ciclo e visualizziamoli in un qualche 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>;
}

Come puoi vedere, il contenuto del nostro ciclo map è abbastanza complesso, specialmente se il markup del prodotto dovesse crescere in futuro. Tale complessità rende difficile la lettura, la comprensione e la manutenzione del codice.

Sarebbe meglio estrarre il codice responsabile della visualizzazione del prodotto in un componente separato. Chiamiamolo Product. Ecco il codice del nostro componente:

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

Ora all'interno del componente Products nel ciclo map utilizzeremo i componenti figli 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>;
}

Come puoi vedere, ora il codice del ciclo è diventato più semplice e più comprensibile. Inoltre, ora la visualizzazione del prodotto è gestita da un componente separato, in cui possiamo creare e poi modificare il markup dei prodotti.

Tecnicamente, abbiamo che il componente genitore ha uno stato con i dati, mentre i componenti figli ricevono questi dati sotto forma di props e li visualizzano nel modo da noi desiderato.

Nello stato del componente Users è dato il seguente array:

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 su questo array con un ciclo e visualizza tutti gli utenti sullo schermo. Crea un componente separato User per la visualizzazione dell'utente.