Jammming issue part 34

Hi all,

I have looked at the forum and I thought I had the answers but I am having real difficulty getting my code to work. I am doing Jammming for the second time to really ingrain what I have learnt so far.

Anyway I am up to part 34 of the jammming exercise and currently getting the below error:
TypeError: Cannot read property ‘name’ of undefined

I have gone through my code multiple times and just can’t find the issue.

Here are a couple of my files:

Track.js

import React from ‘react’;
import ‘./Track.css’;

export class Track extends React.Component {
constructor(props) {
super(props);
}

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

render() {
    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>
            <button className="Track-action">+ or - will go here</button>
        </div>
    )
}

}

TrackList.js

import React from ‘react’;
import ‘./TrackList.css’;
import {Track} from ‘…/Track/Track’;

export class TrackList extends React.Component {
constructor(props) {
super(props);
}

render() {
    return (
        <div className="TrackList">
            {
                this.props.tracks.map(track => {
                    return <Track track={track} />
                })
            }
            <Track />
            {/* <Track you will add a map method that renders a set of Track components */}
        </div>
    )
}

}

SearchResults.js

import React from ‘react’;
import ‘./SearchResults.css’;
import {TrackList} from ‘…/TrackList/TrackList’;

export class SearchResults extends React.Component {
constructor(props) {
super(props);
}

render() {
    return (
        <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={this.props.searchResults}/>               
        </div>
    )
}

}

App.js

import ‘./App.css’;
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: ‘Kickstarts’}, {name: ‘Hello’}],
}
}

render() {
return (


Jammming










);
};

};

export default App;

I imagine this will be an easy fix but I just can’t seem to spot the issue.

Thank you for your help in advance.

Sorry some of the code is not showing properly

App.js

import './App.css';
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: 'Kickstarts'}, {name: 'Hello'}],
    }
  }

  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;

You will also see that this is not done 100% correctly. Trying a few different things to see if I can identify this issue.

Found the issue. All solved, sorry for the inconvenience.

class TrackList extends React.Component {
render() {
return (


{

            (this.props.tracks && this.props.tracks.map(track => {
                  return <Track track = {track}  key = {track.id} />
              })
            )
              
            
            
        }
        </div>
    )
}

};

1 Like

Thank you!! had the same issue on number 34 giving me TypeError, I know a better way of doing it now and declaring props with .map method

Dude thats amazing! thanks :ok_hand: :guitar:
care to explain it a little?