Jamming Spotify playlist app - #35

[matt5000]

Hi everyone,

Im currently going through the Jamming React project and all was going ok till i reached #35. If i comment out the TrackList component in SearchResults, the app will show in the localhost. But when i uncomment it i get a blank screen and no error code. I have tried to carry on with the next step but the issue is the results are not showing in the results box on the app. I have looked through other peoples queries with this but none of the answers seemed to work with this. If someone could point me in the right direction that would be great. Thanks.

SearchResults

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;

TrackList

import React from 'react';

import './TrackList';

import Track from '../Track/Track';

class TrackList extends React.Component {
    render() {
        return (
            <div className="TrackList">
                {
                    this.props.tracks.map(track => {
                        return <Track track={track}
                            key={track.id} />
                    })
                }
            </div>
        )
    }
}

export default TrackList;

Track

import React from "react";

import './Track.css';

class Track extends React.Component {

    renderAction() {
        if (this.props.isRemoval) {
            return <button className="Track-action">-</button>
        } else {
            return <button className="Track-action">+</button>
        }

    }

    renders() {
        return (
            <div className="Track">
                <div className="Track-information">
                    <h3>{this.props.track.name}</h3>
                    <p>{this.props.track.artist} | {this.props.track.album} </p>
                </div>
                {this.renderAction()}
            </div>
        )
    }
}

export default Track;

Playlist

import React from 'react';

import './Playlist.css';

class Playlist extends React.Component {
    render() {
        return (
            <div className="Playlist">
                <input defaultValue={'New Playlist'} />
                {/* <TrackList/> */}
                <button className="Playlist-save">SAVE TO SPOTIFY</button>
            </div>
        )
    }
}

export default Playlist;

App

import React from 'react';
import './App.css';

import SearchBar from '../SearchBar/SearchBar';
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: 'artist1', album: 'album1', id: 1 },
      { name: 'name2', artist: 'artist2', album: 'album2', id: 3 },
      { 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;

Apologies if its something really simple that i’ve missed. I have rewatched the walkthrough several times and been searching for the answer online but not getting anywhere.

Thanks

[matt5000]

Please ignore me, after hours lost looking for the answer i just found “renders” instead of “render”