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

←→
↑