DEV Community

loading...

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

Collapse
bendman profile image
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>
  )
}
Enter fullscreen mode Exit fullscreen mode
Collapse
oathkeeper profile image
Divyesh Parmar

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

Collapse
pengeszikra profile image
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>)
Collapse
duomly profile image
Duomly Author

Hey Ben, yes, map is a good method to do that, and I've created separated episode about map, that you can watch tomorrow, here: youtube.com/watch?v=Fbc4BvYc4ec

In this one, I wanted to show other popular methods :)