Prenos stavov do podriadených komponentov v React

Majme dané pole s produktmi:

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

Nech sa toto pole nachádza v komponente Products. Zapíšme tieto produkty do stavu komponentu:

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

Teraz preiterujme produkty cyklom a zobrazme ich v nejakom rozložení:

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

Ako vidíte, obsah nášho cyklu map je dosť zložitý, najmä ak sa rozloženie produktu v budúcnosti rozšíri. Takáto zložitosť sťažuje čítanie, pochopenie a údržbu kódu.

Bolo by lepšie vyčleniť kód zodpovedný za zobrazenie produktu do samostatného komponentu. Nazvime ho Product. Tu je kód nášho komponentu:

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

Teraz v komponente Products v cykle map použime podriadené komponenty 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>;
}

Ako vidíte, kód cyklu sa zjednodušil a stal sa zrozumiteľnejším. Okrem toho, teraz za zobrazenie produktu zodpovedá samostatný komponent, v ktorom môžeme vytvárať a neskôr upravovať rozloženie produktov.

Technicky to znamená, že rodičovský komponent má stav s dátami a podriadené komponenty získavajú tieto dáta vo forme props a zobrazujú ich nám požadovaným spôsobom.

V stave komponentu Users je dané nasledujúce pole:

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

Preiterujte toto pole cyklom a zobrazte všetkých používateľov na obrazovke. Vytvorte pre zobrazenie používateľa samostatný komponent User.