Stāvokļu nodošana apakškomponentēm React

Pieņemsim, ka mums ir dots produkta masīvs:

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

Pieņemsim, ka šis masīvs atrodas komponentē Products. Ierakstīsim šos produktus komponenta stāvoklī:

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

Tagad apskatīsim produktus ar ciklu un izvērsim tos kādā noformējumā:

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

Kā redzat, mūsu cikla map saturs ir pietiekami sarežģīts, it īpaši, ja produkta noformējums turpmāk izaugs. Šāda sarežģītība apgrūtina koda lasīšanu, izpratni un atbalstu.

Labāk būtu iznest kodu, kas atbild par attēlošanu produkta atsevišķā komponentē. Nosauksim to Product. Lūk, mūsu komponenta kods:

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

Tagad komponenta Products iekšpusē ciklā map izmantosim apakškomponentus 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>;
}

Kā redzat, tagad cikla kods kļuva vienkāršāks un saprotamāks. Turklāt tagad par produkta attēlošanu atbild atsevišķs komponents, kurā mēs varam veikt, un pēc tam rediģēt produktu noformējumu.

Tehniski mēs esam sasnieguši, ka vecāku komponentam ir stāvoklis ar datiem, bet apakškomponenti saņem šos datus propu veidā un attēlo tos mums vajadzīgajā veidā.

Komponenta Users stāvoklī dots šāds masīvs:

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

Apskatiet šo masīvu ar ciklu un izvadiet visus lietotājus uz ekrāna. Izveidojiet lietotāja attēlošanai atsevišķu komponentu User.