Вывод массива объектов в виде таблицы с JSX в React

В этой статье будет затронута тема вывода массива, состоящего из объектов. Подобная задача част встречается на реальных проектах, когда нужно составить HTML таблицу из полученной информации из базы данных.

Разобьём задачу на две более маленьких. Сначала научимся выводить массив объектов и их свойств. А потом составить HTML таблицу.

Вывод массива объектов в JSX

Предположим, что необходимо вывести массив из объектов. Для вывода можно использовать метода map. При этом обращение к свойству объекта будет происходить с помощью "точечной" записи:

function App() {
   const food = [
      {id: 1, name: 'cheese', price: 10},
      {id: 2, name: 'milk', price: 20},
      {id: 3, name: 'bread', price: 30},
   ];

   let res = food.map(function(item) {
      return <p key={item.id}>
         <span>{item.name}</span>
         <span>{item.price}</span>
      </p>;
   });

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

Обратите внимание на свойство id. В нём содержатся порядковые номера объектов. Это очень важное свойство в React. Оно используется React при сортировке массива, чтобы отслеживать связь между элементами и тегами. Поэтому стоит использовать именно id внутри объектов, НЕ используя индекс "index" во втором параметре функции в аргументе метода map:

let res = food.map(function(item, index) {

Вывод массива объектов в виде таблицы

Зная способ вывода свойств объекта попробуем сделать HTML таблицу из данных массива предыдущего примера. Получится такой код:

function App() {
   const food = [
      {id: 1, name: 'cheese', price: 10},
      {id: 2, name: 'milk', price: 20},
      {id: 3, name: 'bread', price: 30},
   ];

   let res = food.map(function(item) {
      return <tr key={item.id}>
         <td>{item.name}</td>
         <td>{item.price}</td>
      </tr>;
   });

   return <table>
      <thead>
         <tr>
            <td>Название</td>
            <td>Стоимость</td>
         </tr>
      </thead>
      <tbody>
         {res}
      </tbody>
   </table>;
}

Опять же, обратите внимание на id. Это очень важное свойство. Обычно в проектах оно берётся из базы данных. Но порой возникают ситуации, когда его просто нет, либо оно представляет собой id из базы NoSQL (выглядит как хеш: набор символов). В таких случаях прибегают к использованию библиотек, которые позволяют генерировать этот id. К примеру, это можно сделать с помощью библиотеки nanoid или react-uuid. Можно использовать любую из этих библиотек, но чтобы не отвлекаться на названия, в будущих статьях по React мы будем предполагать, что эти функции называются "id".

В нашем примере применять функцию генерирующую id необходимо только за пределами цикла map. Иначе у React возникнут проблемы с пониманием что же это такое. То есть если нужно создать id, то делайте так:

const food = [
   {id: id(), name: 'cheese', price: 10},
   {id: id(), name: 'milk', price: 20},
   {id: id(), name: 'bread', price: 30},
];

Но никогда НЕ делайте так:

 let res = food.map(function(item) {
   return <tr key={id()}>
      <td>{item.name}</td>
      <td>{item.price}</td>
   </tr>;
});