Передача стейтов в дочерние компоненты в 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.

Передача id в компонент

Вы уже знаете, что атрибуты тега компонента попадают в пропсы. Это касается всех атрибутов, кроме атрибута key, который нужен для использования в циклах, вот так:

const items = prods.map(prod => {
	return <Product
		key ={prod.id}
		name={prod.name}
		cost={prod.cost}
	/>;
});

В данном случае в пропсы попадут атрибуты name и cost, а key - не попадет. Нам, однако, может понадобится передать id в пропсы компонента. В этом случае нам нужно будет ввести еще один атрибут:

const items = prods.map(prod => {
	return <Product
		key ={prod.id}
		id  ={prod.id}
		name={prod.name}
		cost={prod.cost}
	/>;
});

Модифицируйте ваш компонент User так, чтобы в нем в абзаце выводился id юзера.