Вывод тегов из массивов и циклов в JSX на React

В статье "Переменные и атрибуты с JSX в React" был рассмотрен способ вывода значений переменных в JSX (использование фигурных скобок). В этой статье продолжим практику с выводами тегов из массивов и их формирование внутри циклов.

Вывод массива

Для вывода содержимого массива, в котором хранятся теги, можно использовать функционал фигурных скобок JSX, как при выводе значения переменных. React самостоятельно поймёт, что необходимо именно вывести все элементы массива. Приведём пример:

function App() {
   const a = [<p>1</p>, <p>2</p>, <p>3</p>];
   return <div>
      {arr}
   </div>;
}

В результате выполнения такого примера в браузере появится такой HTML код:

<div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
</div>

Исходные массивы можно формировать внутри циклов. Попробуем переписать предыдущий пример, чтобы продемонстрировать это:

function App() {
   let arr = [];

   for (let i = 1; i <= 3; i++) {
      arr.push(<p>{i}</p>);
   }

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

Результат выполнения этого кода будет аналогичен результату в предыдущем примере:

<div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
</div>

В исходном массиве могут содержаться не только теги. Тогда перед их выводом необходимо обернуть все значения массива в тег. Обычно это делают с помощью метода map. Он позволяет применить любую пользовательскую функцию к каждому элементу массива (новое значение элемента должно возвращаться через "return").

Попробуем переписать предыдущий пример, исходя из того, что в начальный массив будут добавляться числа, а уже затем обёртываться в теги:

function App() {
   let arr = [];

   for (let i = 1; i <= 3; i++) {
      arr.push(i);
   }

   let arrTag = arr.map(function(element, index) {
      return <p>{element}</p>;
   });

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

Результат выполнения кода из примера будет аналогичен всем предыдущим:

<div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
</div>