DEV Community

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

bendman profile image
Ben Duncan • Edited on

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 = => <li key={product}>{product}</li>)

  return (
Enter fullscreen mode Exit fullscreen mode
pengeszikra profile image
Peter Vivo • Edited on

Maybe product is non unique, index still usefull

  const list =, 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 ={info, key}) => <li key={key}>{info}</li>)
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:

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

oathkeeper profile image
Divyesh Parmar

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