Posredovanje stanj (states) v podrejene komponente v Reactu

Recimo, da imamo podano tabelo s produkti:

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

Recimo, da se ta tabela nahaja v komponenti Products. Zapišimo te produkte v stanje komponente:

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

Zdaj pa iterirajmo skozi produkte z zanko in jih prikažimo v neki predlogi:

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

Kot lahko vidite, je vsebina naše zanke map precej zapletena, še posebej, če se bo predloga produktov v prihodnje še razširila. Takšna kompleksnost otežuje branje, razumevanje in vzdrževanje kode.

Bolje bi bilo, če bi kodo, odgovorno za prikaz produkta, izločili v ločeno komponento. Poimenujmo jo Product. Tukaj je koda naše komponente:

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

Zdaj pa uporabimo v komponenti Products v zanki map podrejene 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>;
}

Kot lahko vidite, se je koda zanke poenostavila in postala bolj razumljiva. Poleg tega je zdaj za prikaz produkta odgovorna ločena komponenta, v kateri lahko ustvarjamo in kasneje urejamo predlogo produktov.

Tehnično imamo torej starševsko komponento, ki ima stanje (state) s podatki, podrejene komponente pa te podatke prejmejo v obliki props (lastnosti) in jih prikažejo na način, ki ga želimo.

V stanju (state) komponente Users je podana naslednja tabela:

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

Iterirajte skozi to tabelo z zanko in prikažite vse uporabnike na zaslonu. Za prikaz uporabnika ustvarite ločeno komponento User.