DEV Community

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

View post
Collapse
 
bendman profile image
Ben Duncan • • Edited

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
 
duomly profile image
Duomly •

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

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 • • Edited

Maybe product is non unique, index still usefull

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

... 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>)
Enter fullscreen mode Exit fullscreen mode