Jammming props showing as undefined

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-challenge-project-jammming/projects/jammming-prj

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;

SearchResults in the constructor Vs this.state.searchResults when being passed into the component. searchresults is not the same casing.

1 Like

thank you so much for your time. I have made the amendment and it works :relaxed:

1 Like