TypeError: Cannot read property 'map' of undefined Error

Question

I am trying to fetch the data from the API in my react application. I have the component ListApp below

import React, {Component} from 'react';
import Card from './Card'

export default class ListApp extends Component{
    constructor(props){
        super(props);
        this.state = {
            items : [],
            isLoaded: false
        }
    }
    componentDidMount = () => {
        fetch('https://api.themoviedb.org/3/movie/550?api_key=my_api_key')
        .then(response => response.json())
        .then(response =>{
            this.setState({
                isLoaded: true,
                items: response.results
            })
            console.log(this.state.items)
        })
    }
    render(){
        var {isLoaded,items} = this.state;
        return(
           <div>
               {items.map(item => (<Card key={item.id} item={item} />))};
           </div> 
        )
    }
}

And below is my Card component:

import React,{Component} from 'react'

const Card = (props) => {
    const {items} = props;
    return(
        <div className="movie-container">
            <img src="https://image.tmdb.org/t/p/w185/{items.poster_path}" alt="NO PHOTO" className="movie-container__img"/>
            <div className="movie-container__about">
                <span className="movie-container__percent">{items.vote_average}</span>
                <h2 className="movie-container__title">{items.original_title}</h2>
                <p className="movie-container__date">{items.release_date}</p>
                <p className="movie-container__text">{items.overview}</p>
                <a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
            </div>
        </div>
    )
}

export default Card;

I am getting the error TypeError: Cannot read property 'map' of undefined.

How can I solve it?

Answer 1

That's because the result of your fetch (response.results) is undefined, and you are setting that to the state. I think the best way to handle this is to change:

this.setState({
   isLoaded: true,
   items: response.results
})

by:

this.setState({
   isLoaded: true,
   items: response.results || []
})

Answer 2

condition ? true : false if we want to render the Loading... text:

It works in JavaScript because true && expression always evaluates to expression, and false && expression always evaluates to false.

That's the reason It should be written like:-

**items && items.map(item => (<Card key={item.id} item={item} />))};**

Answer 3

All well be ok if you get from server

{
  results: [
    {
      vote_average: ...
      original_title: ...
      release_date: ...
      overview: ...
    }
    ,
  ]
} 

or

{
  results: []
}

Also fix it (items will be item ):

import React,{Component} from 'react'

const Card = (props) => {
    const {item} = props;
    return(
        <div className="movie-container">
            <img src="https://image.tmdb.org/t/p/w185/{item.poster_path}" alt="NO PHOTO" className="movie-container__img"/>
            <div className="movie-container__about">
                <span className="movie-container__percent">{item.vote_average}</span>
                <h2 className="movie-container__title">{item.original_title}</h2>
                <p className="movie-container__date">{item.release_date}</p>
                <p className="movie-container__text">{item.overview}</p>
                <a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
            </div>
        </div>
    )
}

export default Card;

Answer 4

response.results could be empty so you need to check items if it's empty or not.

{items && items.map(item => (<Card key={item.id} item={item} />))};