Předávání stavů do podřízených komponent v Reactu

Předpokládejme, že máme dané pole s produkty:

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

Předpokládejme, že toto pole je umístěno v komponentě Products. Zapišme tyto produkty do stavu komponenty:

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

Nyní projděme produkty cyklem a vypišme je v nějakém rozložení:

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 vidíte, obsah našeho cyklu map je dostatečně složitý, obzvláště pokud se rozložení produktu dále rozroste. Taková složitost ztěžuje čtení, porozumění a údržbu kódu.

Bylo by lepší vyčlenit kód zodpovědný za zobrazení produktu do samostatné komponenty. Nazveme ji Product. Zde je kód naší komponenty:

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

Nyní uvnitř komponenty Products v cyklu map použijme podřízené 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>;
}

Jak vidíte, kód cyklu se nyní zjednodušil a stal se srozumitelnějším. Kromě toho nyní za zobrazení produktu zodpovídá samostatná komponenta, ve které můžeme vytvářet a poté upravovat rozložení produktů.

Technicky nám vychází, že rodičovská komponenta má stav s daty a podřízené komponenty přijímají tato data ve formě props a zobrazují je způsobem, který požadujeme.

Ve stavu komponenty Users je dáno následující 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},
];

Projděte toto pole cyklem a zobrazte všechny uživatele na obrazovce. Vytvořte pro zobrazení uživatele samostatnou komponentu User.