Дочерний компонент в React

Попробуем продемонстрировать, как можно сделать компонент внутри компонента. Для этого сделаем небольшое приложение интернет магазина. В основном компоненте "App" будем выводить список товаров. Список будем брать из массива объектов, описывающий все товары: название и стоимость. Каждый товар в списке будет выводиться отдельным компонентом. Так получится компонент внутри компонента.

Сначала сделаем общую заготовку со всем кодом, а потом разделим её на компоненты. Начнём без циклов, простым перечислением:

const products = [
   {id: id(), name: 'Сыр', price: 100},
   {id: id(), name: 'Хлеб', price: 200},
   {id: id(), name: 'Молоко', price: 300},
];

import React from 'react';

function App() {
   return <div>
      <div>Товар {products[0].name} стоит {products[0].price}</div>
      <div>Товар {products[1].name} стоит {products[1].price}</div>
      <div>Товар {products[2].name} стоит {products[2].price}</div>
   </div>;
}

export default App;

Такой код выведет на страницу только три строчки:

Товар Сыр стоит 100
Товар Хлеб стоит 200
Товар Молоко стоит 300

Давайте напишем первый компонент. Его функцией будет вывод одного товара. Создаём файл "Product.js" и пишем в него такой код:

import React from 'react';

function Product({ name, price }) {
   return <div>
      Товар {name}
      стоит {price}
   </div>;
}

export default Product;

Теперь перепишем наш основной компонент "App", заменив его часть на компонент "Product". Получится так:

import Product from './Product'; // не забываем подключить компонент

function App() {
   return <div>
      <Product name={products[0].name} price={products[0].price} />
      <Product name={products[1].name} price={products[1].price} />
      <Product name={products[2].name} price={products[2].price} />
   </div>;
}

Как можно заметить, такой код имеет большой потенциал к оптимизации. Попробуем доработать этот пример, поставив вызов компонента "Product" внутрь цикла, который будет проходить по всем товарам:

function App() {
   const result = products.map(prod => {
      return <Product name={prod.name} price={prod.price} key={prod.id} />;
   });

   return <div>
      {result}
   </div>;
}

Код нашего основного компонента стал понятнее. В нём сложнее ошибиться. Но теперь сделаём ещё один уровень вложенности. В новый компонент "Products" мы будем передавать массив products. Единственная задача этого компонента будет возврат списка из компонентов "Product".

Создадим файл "Products.js" и запишем в него

import React from 'react';

function Products(arr) {
   const result = arr.map(prod => {
      return <Product name={prod.name} price={prod.price} key={prod.id} />;
   });

   return {result};
}

export default Products;

А затем перепишем основной компонент App:

import Products from './Products'; // список товаров
import Product from './Product'; // один товар

function App() {
   return <div>
      <Products arr={products} />;
   </div>;
}

Таким образом массив с описанием товаров "products" внутри компонента "App" сначала передаётся в компонент "Products". А из "Products" передаётся в "Product". Получается компонент в компоненте.