Как правильно динамически создавать элементы в React

Question

Есть реакт-компонент:

import { React } from 'react';

function Component() {
  const arr = ['ad', 'gvsf', 'awd'];
  return (
    <div>
      {}  {/* code here */}
    </div>
  );
}

export default Component;

В нем нужно создать блок, содержащий arr.length блоков с текстом из arr соответственно.

На обычном js я бы написал функцию, создающую контейнер и с помощью .forEach перебрал бы массив, создав элементы и поместив их в блок.

Как сделать это на реакт?

Answer 1

import { React } from 'react';

function Component() {
  const arr = ['ad', 'gvsf', 'awd'];
  return (
    <div>
      { arr.map(item => (<span>{item}{' '}</span>)) } 
    </div>
  );
}

export default Component;

Используй map, возвращай элементы в том виде, в котором надо

БЛОГ НА HUSL

Как правильно динамически создавать элементы в React

Ответы (1 шт):