.map undefined on array of object

Question

I am passing array of object as a prop from App.js -> searchResult -> TrackList.js. But when I apply.map function on the array of object it shows Cannot read property 'map' of undefined . I have tried different ways to solve this but none of them worked. In console I am getting the value of prop. And my TRackList.js component is rendering four times on a single run. Here is the code

App.js

 this.state = {
      searchResults: [
        {
          id: 1,
          name: "ritik",
          artist: "melilow"
        },
        {
          id: 2,
          name: "par",
          artist: "ron"
        },
        {
          id: 3,
          name: "make",
          artist: "zay z"
        }
      ]

return ( <SearchResults searchResults={this.state.searchResults} /> )

In Searchresult.js <TrackList tracked={this.props.searchResults} />

In TrackList.js

import React from "react";
import Track from "./Track";
export default class TrackList extends React.Component {
  constructor(props) {
    super();
  }
  render() {
 console.log("here",  this.props.tracked);
    return (
      <div>
        <div className="TrackList">
          {this.props.tracked.map(track => {
            return (<Track track={track} key={track.id} />);
          })}
        </div>
      </div>
    );
  }
}

Here is the full code -- https://codesandbox.io/s/jamming-ygs5n?file=/src/components/TrackList.js:0-431

Answer 1

You were loading the Component TrackList twice. One time with no property passed, that's why it was first set in console then looks like it's unset, but it's just a second log. I have updated your code. Take a look here https://codesandbox.io/s/jamming-ddc6l?file=/src/components/PlayList.js

Answer 2

You need to check this.props.tracked.map is exists before the loop.

Solution Sandbox link: https://codesandbox.io/s/jamming-spf7f?file=/src/components/TrackList.js

import React from "react";
import Track from "./Track";
import PropTypes from 'prop-types';

export default class TrackList extends React.Component {
  constructor(props) {
    super();
  }
  render() {
    console.log("here", typeof this.props.tracked);
    return (
      <div>
        <div className="TrackList">
           {this.props.tracked && this.props.tracked.map(track => {
            return <Track track={track} key={track.id} />;
          })} 
        </div>
      </div>
    );
  }
}

TrackList.propTypes = {
  tracked: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string,
    artist: PropTypes.string,
  }))
};

Answer 3

You need to check this.props.tracked value before implementing the map function.

you can simply check using this.props.tracked && follow your code.

Answer 4

You should add searchResults={this.state.searchResults} in your app.js to Playlist, take it in Playlist with props, and then set it in TrackList from Playlist ( tracked={props.searchResults} ).

Also, Typescript helps me not to do such mistakes. Also, add a key prop to your component that you return in the map function.