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
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>
);
}
}You can render object directly in JSX. Specify the object value
this.state.searchResults.map((track) => (
<p>{track.name} {track.artist} {track.album} </p>
))