Дар React ба компонентҳои фарзандӣ стейтҳо гузаронидан

Бигзор ба мо массиви маҳсулотҳо дода шуда бошад:

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

Бигзор ин массив дар компоненти Products ҷойгир бошад. Ин маҳсулотҳоро ба ҳолати компонент нависем:

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

Акнун биёед маҳсулотҳоро бо ҳалқа гузаронида ва онҳоро дар ягон верстка бароварем:

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

Чунон ки шумо мебинед, мундариҷаи ҳалқаи мо map коста аст, хусусан агар версткаи маҳсулот дар оянда калон шавад. Ин гуна кордӣ хондан, фаҳмидан ва дастгирии кодро душвор мекунад.

Беҳтар аст коде, ки барои намоиши маҳсулот масъул аст, ба компоненти алоҳида бароварда шавад. Онро номгузорӣ мекунем Product. Ин коди компоненти мост:

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

Биёед акнун дар дохили компоненти Products дар ҳалқаи map аз компонентҳои фарзандии 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>;
}

Чунон ки шумо мебинед, акнун коди ҳалқа содда шуд ва барои фаҳмидан равшантар гардид. Илова бар он, акнун барои намоиши маҳсулот компоненти алоҳида масъул аст, ки дар он мо метавонем версткаи маҳсулотҳоро созем, ва сипас таҳрир кунем.

Техникӣ, ба мо чунин баромад, ки компоненти волидайн стеите бо додаҳо дорад, ва компонентҳои фарзандӣ ин додаҳоро ба сурати пропсҳо мегиранд ва онҳоро ба сурати дархосткардаи мо намоиш медиҳанд.

Дар стейти компоненти Users массиви зерин дода шудааст:

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

Ин массивро бо ҳалқа гузаронед ва ҳамаи корбаронро дар экран намоиш диҳед. Барои намоиши корбар компоненти алоҳидаи User эҷод кунед.