Having some problem on using map() method on my react application

Question

In my app i have an initial state in a component App.js it's an array of objects

Here is App.js code:

import React, { Component } from 'react';

import './App.css';
import { render } from '@testing-library/react';

// Import Used Components
import SearchBar from '../SearchBar/SearchBar';
import Playlist from '../PlayList/PlayList';
import SearchResults from '../SearchResults/SearchResults';

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}]
    };
  }

  // Adding JSX to App Component
  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;

I passed this initial state as a prop called searchResults to another component named.

Here is searchResults.js code:

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;

then I used passed this prop to another component called TrackList

here is TrackList.js code:

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

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;

In Track.js I want to map through this initial state array to render a component called Track

here is the Track.js code:

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

class Track extends React.Component {


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


    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">{this.renderAction}</button>
            </div>
        );
    }
}

export default Track;

But something is wrong:! I keep getting this error:

TypeError: Cannot read property 'map' of undefined

---

Here is searchBar.js component code:

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

class SearchBar extends React.Component {
    render() {
        return (
            <div className="SearchBar">
                <input placeholder="Enter A Song, Album, or Artist" />
                <button className="SearchButton">SEARCH</button>
            </div>
        );
    }
}

export default SearchBar;

HERE LINK TO THE PROJECT WITH THE SAME ERROR ON SANDBOX https://codesandbox.io/s/upbeat-dawn-lwbxb?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Change your TrackList component to this:

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

You can't map through this.props.tracks if it is undefined .

The && (AND operator) is a concise way to conditionally render in React. You can think of it like a simple if statement: If the expression on the left is true, then do x.

---

I'll also expand on why the this.props.tracks was undefined in a certain instance in your case.

The reason that this problem is happening is your Playlist component. If you uncomment this component from your App you will notice your original code will work.

This is because your PlayList component, like your SearchResults component, also renders your TrackList component. The problem is you haven't passed your state and props down to TrackList like you did with your SearchResults component.

So an alternative solution would be to pass your state and props down from PlayList to TrackList :

App.js

// ...
<SearchResults searchResults={this.state.searchResults} />
<Playlist searchResults={this.state.searchResults}/>
// ...

PlayList.js

// ...
<TrackList tracks={this.props.searchResults}/>
// ...