How to generate dynamic number of components in React?

Question

JavaScript

For example, I received data from the server and I need to generate several product components, passing their own props to each. How can I do that?

Answer 1

Make an ItemsList and Item component:

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>
    )
  }
}

Pay attention to the key property here - it is necessary when you use dynamic children.