Как зацикливаться внутри React JSX

Если у вас есть набор элементов, по которым вам нужно выполнить цикл для создания части JSX, вы можете создать цикл, а затем добавить JSX в массив:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) {
  items.push()
}

Теперь при рендеринге JSX вы можете встроить массив items , заключив его в фигурные скобки:

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push({value})
  }

  return (
    
      {items}
    
  )
}

Вы можете сделать то же самое непосредственно в JSX, используя map вместо цикла for-of:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    
      {elements.map((value, index) => {
        return {value}
      })}
    
  )
}

Оригинал: “https://flaviocopes.com/react-how-to-loop/”

Читайте ещё по теме: