Odtnhj

My React project component structure is very simple: App >> SearchResults >> TrackList.
To test, I output the value of the data in each component.
In the App.js file, I used this.state to define an array of objects called searchResults.

class App extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 searchResults: [
 
 name: 'name-1',
 artist: 'artist-1',
 alblum: 'alblum-1',
 id: 101
 ,
 
 name: 'name-2',
 artist: 'artist-2',
 alblum: 'alblum-2',
 id: 202
 
 ]
 
 
 render() 
 console.log('Here is App.js', this.state.searchResults);
 return (
 <div>
 <h1>Ja<span className="highlight">mmm</span>ing</h1>
 <div className="App">
 <SearchBar />
 <div className="App-playlist">
 <SearchResults searchResults=this.state.searchResults />
 <Playlist />
 </div>
 </div>
 </div>
 );
 


export default App;

In the SearchResults.js file, I used tracks=this.props.searchResults to pass the data to the child component.

class SearchResults extends React.Component 
 render() 
 console.log('Here is SearchResults.js', this.props searchResults);
 return (
 <div className="SearchResults">
 <h2>Results</h2>
 <TrackList tracks=this.props.searchResults />
 </div>
 );
 


export default SearchResults;

In the TrackList.js file, I output the data from parent component.

class TrackList extends React.Component 

 render() 
 console.log('Here is TrackList.js', this.props.tracks);
 return (
 <div className="TrackList">
 this.props.tracks.map(track => <Track key=track.id track=track />)
 </div>
 );
 


export default TrackList

But, strange things happen, the console prints the data twice, showing the normal values the first time, and undefined the second time.
Because of this, I cannot use the.map() function for this data.
Why did this happen, and how to fix it?

console screenshot is here: Console