Jamming project

#1

Pass the search results from the SearchResults component to the TrackList component.

i follow the vid but when i enter dev tools the props is not getting pass

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;

import React from 'react';
import SearchBar from '../SearchBar/SearchBar';
import './App.css';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      SearchResults: [
        {name: 'name1', artist: 'artis1', album: 'album1', id: 1},
      {name: 'name2', artist: 'artis2', album: 'album2', id: 2},
      {name: 'name3', artist: 'artis3', 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;
1 Like
#2

Hi! So I think you might have some capitalization issues. There’s a conflict with the prop name in your App constructor that’s the same exact name and case as the component. Case matters in JS.

In SearchResults.js, this.props.SearchResults should be this.props.searchResults

and in App.js:

this.state= {
      SearchResults: [    <--- This should be searchResults, not the same case as the component name. 
        {name: 'name1', artist: 'artis1', album: 'album1', id: 1},
      {name: 'name2', artist: 'artis2', album: 'album2', id: 2},
      {name: 'name3', artist: 'artis3', album: 'album3', id: 3}
    ]

    };

Hope this helps!