I have completed task 33 out of 99 on the Jammming project. I see on the walkthrough video (around 43mins in ) that you can see whether a state has been passed down or not using the React dev tools.
I am seeing that the props are undefined in my Chrome dev tools components when I click on the SearchResults selector or component. Should I be seeing that the props are indeed an array as in the video or is this because I am using the latest React dev tools.
I have the following code for the stateful App component:
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar.js';
import SearchResults from '../SearchResults/SearchResults.js';
import Playlist from '../Playlist/Playlist.js';
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;
the code for my stateless SearchResults component:
import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';
class SearchResults extends React.Component{
render(){
return(
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults} />
</div>
)
}
}
export default SearchResults;
