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.

Answer 1

You need to iterate array using map,

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