React is not rendering this.state object [duplicate]

Question

I am new to React and also to stackoverflow,

I am trying to render this.state.searchResults as attached code

The code runs without any error, but does not render. what wrong am I doing here ?

I am exporting this component in my main js file. if I run without map method, it renders correctly.

please help

code image

    export class App extends React.Component {

      constructor(props) {
        super(props);
        this.state = { 
            searchResults:  [
              {name: 'name1', artist: 'artist1', album: 'album1', id: 1},
              {name:' name2', artist: 'artist2', album: 'album2', id: 2},
              {name: 'name3', artist: 'artist3', album: 'album3', id: 3}
            ] 
          }
        }

      render() {
        return (
        <div>  
          <h1>Ja<span class="highlight">mmm</span>ing </h1>      
          <div className="App">       
            { this.state.searchResults.map( track => {
                return track
              })
            } 
          </div>
        </div>
        
      );
    }
    }

Answer 1

You can render object directly in JSX. Specify the object value

this.state.searchResults.map((track) => (
<p>{track.name} {track.artist} {track.album} </p>
))