Przekazywanie stanów do komponentów potomnych w React

Załóżmy, że mamy daną tablicę z produktami:

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

Załóżmy, że ta tablica znajduje się w komponencie Products. Zapiszmy te produkty w stanie komponentu:

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

Teraz przeiterujmy produkty pętlą i wyświetlmy je w jakimś kodzie HTML:

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

Jak widzicie, zawartość naszej pętli map jest dość złożona, szczególnie jeśli kod HTML produktu rozrośnie się w przyszłości. Taka złożoność utrudnia czytanie, zrozumienie i utrzymanie kodu.

Lepiej będzie wynieść kod odpowiedzialny za wyświetlanie produktu do oddzielnego komponentu. Nazwijmy go Product. Oto kod naszego komponentu:

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

Teraz wewnątrz komponentu Products w pętli map użyjmy komponentów potomnych 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>;
}

Jak widzicie, kod pętli uprościł się i stał się bardziej zrozumiały. Poza tym, teraz za wyświetlanie produktu odpowiada oddzielny komponent, w którym możemy tworzyć, a potem edytować kod HTML produktów.

Technicznie otrzymujemy, że komponent nadrzędny ma stan z danymi, a komponenty potomne otrzymują te dane w postaci propsów i wyświetlają je w pożądany przez nas sposób.

W stanie komponentu Users dana jest następująca tablica:

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

Przeiteruj tę tablicę pętlą i wyświetl wszystkich użytkowników na ekranie. Utwórz do wyświetlania użytkownika oddzielny komponent User.