Как генерировать динамическое количество компонентов в React?

Question

[Nick8]

К примеру, мне пришли данные с сервера и необходимо сгенерировать несколько компонентов товара, передавая каждому свои пропсы. Как это можно сделать?

Answer 1

[Никита Гущин]

Сделайте компонент ItemsList и Item:

class Item extends React.PureComponent {
  render() {
    const { name, color } = this.props

    return (
      <li>
         <b>{name} ({color})</b>
      </li>
    )
  }
}


class ItemsList extends React.PureComponent {
  render() {
    const { items } = this.props

    return (
      <ul>
        {items.map(item => (
          <Item key={item.id} {...item} />
        )}
      </ul>
    )
  }
}

Тут обратите внимание на свойство key - оно необходимо, когда у вас используются динамические children.

Answer 2

[Inspy]

map