Olekute edastamine alamkomponentidesse Reactis

Oletame, et meil on toodete massiiv:

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

Oletame, et see massiiv asub komponendis Products. Kirjutame need tooted komponendi olekusse:

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

Nüüd loome toodete üle tsükli ja kuvame need mingis kujunduses:

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

Nagu näete, on meie map-tsükli sisu piisavalt keeruline, eriti kui toote kujundus edaspidi laieneb. Selline keerukus raskendab koodi lugemist, mõistmist ja hooldust.

Oleks parem eraldada toote kuvamise eest vastutav kood eraldi komponendiks. Nimetame selle Product. Siin on meie komponendi kood:

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

Kasutagem nüüd komponendi Products sees map-tsüklis alamkomponente 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>;
}

Nagu näete, on tsükli kood nüüd lihtsustunud ja muutunud arusaadavamaks. Lisaks vastutab toote kuvamise eest nüüd eraldi komponent, kus saame luua ja seejärel muuta toodete kujundust.

Tehniliselt saame sellise tulemuse, et vanemkomponendil on andmetega olek ning alamkomponendid saavad need andmed propsidena ja kuvavad need meile vajalikul viisil.

Komponendi Users olekus on antud järgmine massiiv:

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

Looge selle massiivi üle tsükkel ja kuvage kõik kasutajad ekraanil. Kasutaja kuvamiseks looge eraldi komponent User.