react js-× TypeError: Cannot read property 'map' of undefined

Question

I have an issue with this code: TypeError: Cannot read property 'map' of undefined

Please guide me on what to do

app.js

import React from "react";

import {CardList} from "./componets/card-list/card-list";


class App extends React.Component {
    constructor() {
        super();
        this.state={
            monsters:
                []
        };
    }
    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then((data) => {
                this.setState({ monsters: data })
            })
    }
    render() {
     return(
         <div>
             <CardList monters={this.state.monsters}/>
         </div>
     )
 }
}
export default App;

and cardlist.jsx Please guide me on what to do

import './card-list.css'


export const CardList=(props) => (

     <div className='card-list'>{props.monsters.map(monster =>(<h1 key={monster.id}>{monster.name}</h1>))}

    </div>
);```

monters !== monsters.

Tushar
– Tushar

2020-04-01 10:23:31 +00:00
Commented Apr 1, 2020 at 10:23 — Tushar
– Tushar, Commented Apr 1, 2020 at 10:23

Mark Minerov · Accepted Answer · 2020-04-01 10:25:12Z

3

You missed here:

<CardList monters={this.state.monsters}/>

You called your prop monters

answered Apr 1, 2020 at 10:25

Mark Minerov

3061 silver badge11 bronze badges

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

Comments

Zeeshan Ahmad · Accepted Answer · 2020-04-01 10:29:56Z

You need to set the default value of data to empty array incase you receive nothing from the fetch request. Try following:

import React from "react";

import {CardList} from "./componets/card-list/card-list";


class App extends React.Component {
    constructor() {
        super();
        this.state={
            monsters:
                []
        };
    }
    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then((data = []) => {
                this.setState({ monsters: data })
            })
    }
    render() {
     return(
         <div>
             <CardList monters={this.state.monsters}/>
         </div>
     )
 }
}
export default App;

Collectives™ on Stack Overflow

react js-× TypeError: Cannot read property 'map' of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related