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