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 компонентін жасаңыз.