My webpage was rendering fine up until I try to create a TrackList component in the Searchresult file. I think ive exported and imported everything correctly and the props are showing up in search results through dev tools.
someone pls help I really wanna finish this project 
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 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;
class SearchResults extends React.Component {
render() {
return (
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults}/>
</div>
)
}
}
export default SearchResults;
import React from "react";
import './TrackList.css'
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
</div>
)
}
}
export default TrackList;