Kupeleka Steti kwa Vijenzi Vinavyotegemea katika React

Acha tuwe na safu ya bidhaa:

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

Acha safu hii iwe katika kijenzi Products. Tuandike bidhaa hizi katika hali ya kijenzi:

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

Sasa tuzungushe bidhaa kwa kitanzi na tuzionyeshe katika muundo wowote:

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

Kama unavyoona, yaliyomo kwenye kitanzi chetu map ni ngumu sana, hasa ikiwa muundo wa bidhaa utaongezeka baadaye. Ugumu kama huo huwaongezea shida kusoma, kuelewa na kudumisha msimbo.

Ni bora kutenga msimbo unaohusika na kuonyesha bidhaa kwenye kijenzi tofauti. Tukiite Product. Huu ndio msimbo wa kijenzi chetu:

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

Sasa tupate ndani ya kijenzi Products katika kitanzi map tutumie vijenzi vinavyotegemea 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>;
}

Kama unavyoona, sasa msimbo wa kitanzi umerahisishwa na umekuwa rahisi kueleweka. Zaidi ya hayo, sasa kuonyesha bidhaa kunafanyika na kijenzi tofauti, ambacho tunaweza kufanya, kisha kuhariri muundo wa bidhaa.

Kitaalamu imetupatia kuwa kijenzi kikuu kina steti na data, na vijenzi vinavyotegemea vinapata data hizi kama props na kuzionyesha kwa njia tunayotaka.

Katika hali ya kijenzi Users kuna safu ifuatayo:

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

Zungusha safu hii kwa kitanzi na uonyeshe watumiaji wote kwenye skrini. Unda kijenzi tofauti User kwa ajili ya kuonyesha mtumiaji.