Discussion on: How to use loop in React.js?

[Ben Duncan]

Nice article! I see you mention map, but it's worth emphasizing that it is much more common to use map for this kind of thing as it doesn't require declaring your list early, mutating the list, or using side-effects.

Also, don't forget to pass the key prop!

function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = products.map(product => <li key={product}>{product}</li>)

  return (
    <div>
      {list}
    </div>
  )
}

[Divyesh Parmar]

How about using a useMemo() to maintain that arrays reference and only call it when we want to change

[Peter Vivo]

Maybe product is non unique, index still usefull

  const list = products.map((product, key) => <li key={key}>{product}</li>)

... but better if prodcut contains key and info

  // products = [ {info: 'red apple', key: 'RB67'}, {info: 'green pie', key: 'CB732'}];
  const list = products.map(({info, key}) => <li key={key}>{info}</li>)