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?

check that response.results !== undefined

Daniil Loban
– Daniil Loban

2020-12-22 10:27:24 +00:00
Commented Dec 22, 2020 at 10:27 — Daniil Loban
– Daniil Loban, Commented Dec 22, 2020 at 10:27
Try this items: response.results || []

Sarun UK
– Sarun UK

2020-12-22 10:30:05 +00:00
Commented Dec 22, 2020 at 10:30 — Sarun UK
– Sarun UK, Commented Dec 22, 2020 at 10:30

topdev87 · Accepted Answer · 2020-12-22 10:26:14Z

1

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} />))};

answered Dec 22, 2020 at 10:26

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniil Loban · Accepted Answer · 2020-12-22 10:37:33Z

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;

Amitesh mani tiwari · Accepted Answer · 2021-01-09 17:05:13Z

0

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} />))};**

answered Jan 9, 2021 at 17:05

Amitesh mani tiwari

5494 silver badges6 bronze badges

Comments

David Fernández Ortiz · Accepted Answer · 2021-01-09 17:15:22Z

0

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 || []
})

answered Jan 9, 2021 at 17:15

David Fernández Ortiz

7334 silver badges7 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'map' of undefined Error

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related