Reading array elements with forEach in reactjs [duplicate]

Question

I am a beginner in React. I have a pretty simple code. (There are other questions which seems to be duplicate of this but they ain't. Please read the contents also not just the question heading before marking duplicate.)

import React, { Component } from 'react';
class Likes extends Component {
  render() {
    var music=["linkin park", "led zaplin", "regina spector", "bruno mars"];
    return(
    {
      music.forEach(function (value, index, array) {
          <h1>{value}</h1>
       })
      }
    );
  }
}
export default Likes;

Is it correct way or should I use state. I wanted to keep it as simple as possible. But I'm getting this.

What is that I am missing. What else I should know.

PS: I dont have any other separate component or code. Everything is there inside the class itself.

Ok. But then I'll have to set keys also. Correct me If i'm wrong. — Tanzeel
– Tanzeel, Commented Aug 7, 2019 at 15:33
use below code music.map((value, index) { <h1>{value}</h1> }) — Puneet Bhandari
– Puneet Bhandari, Commented Aug 7, 2019 at 15:34
@tanzeel if you add/remove value from array and setState then component will automatically rerender and index will initialize again — Puneet Bhandari
– Puneet Bhandari, Commented Aug 7, 2019 at 15:41
The problem with your code is a syntaxError and not the use of forEach (though you will have to use map due to the fact that map returns an array that react will use to render but forEach itself does not return anything. Try [1,2,3].forEach(a => a) and [1,2,3].map(a => a) in your browser console to see the difference). The syntaxError can be fixed like const elements = [] music.forEach(function(value, index, array) { elements.push(<h1>{value}</h1>) }) return elements With forEach you build an array of elements urself but map does this automatically — Lucky Soni
– Lucky Soni, Commented Aug 7, 2019 at 17:02

ravibagul91 · Accepted Answer · 2019-08-07 15:35:54Z

12

You need to iterate array using map,

{music.map(function (value, index, array) {
    return <h1 key={index}>{value}</h1>
  })
}

answered Aug 7, 2019 at 15:35

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tanzeel Over a year ago

Oh. Ok. So I cannot use forEach here ?

ravibagul91 Over a year ago

Correct. Use map and return h1 element.

ravibagul91 Over a year ago

React internally works with index, we don't work with index manually.

Tanzeel Over a year ago

@ravibaglu91. wow. I'll keep this in mind.

wiesson Over a year ago

Keep this in mind: reactjs.org/docs/lists-and-keys.html - We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

|

Collectives™ on Stack Overflow

Reading array elements with forEach in reactjs [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related