Displaying Data with ReactJS - Cannot read property 'map' of undefined

Question

I am trying to create a separate card dynamically for each element that I have fetched with React.

Being quite new to React, I am having this issue where I can't map each of my element so that I can use them in the html. The official error that I am getting is:

Cannot read property 'map' of undefined

Here is a link to my json data

This is my React code:

export class ZonePreviewMenu extends React.Component {
constructor(props){
    super(props);
    this.state = {
        isLoading: true,
        rooms: []
    }
}

componentDidMount(){
    this.fetchData();
}

fetchData(){
    fetch("https://api.myjson.com/bins/r5pn2")
    .then(response => response.json())
    .then(data => console.log(data))
    .then(data => {this.setState({data: data })})
    .catch(error => console.log("parsing failed", error))
}

    render(){
        return(

                <div className="zone-panel">
                    <h2> Zones </h2>
                 { this.state.data.map((item, i) => {
                    console.log(item.name)
                 })

                 }

                    <div className="image-panel">
                        <div className="#">
                            <div className="icon-row-one">
                                <img src={thermoIcon}/> 21C
                                <button className="btn btn-default btn-circle btn-lg top-buttons"><img src={cameraIcon}/></button>
                                <button className="btn btn-default btn-circle btn-lg lights-button"><img src={lightsIcon}/></button>
                            </div>
                            <div className="icon-row-two">
                                <img src={peopleIcon}/> 60
                            </div>
                        </div>
                    </div>
                </div>
        );
    }
}

This is the part where I get the error:

             { this.state.data.map((item, i) => {
                console.log(item.name)
             })

             }

Question: Why am I getting this error and how can I create a card for each element of the posted JSON object.

Your fetch call is asynchronous, so it doesn't complete before render tries to map over this.state.data. If you initialize data: [] inside your state, data will no longer be undefined and you won't see this error. — Keith Brewster
– Keith Brewster, Commented Nov 7, 2018 at 18:28
By writing .then(data => console.log(data)) you make it so that data in .then(data => {this.setState({data: data })}) is undefined, so you should remove that. — Tholle
– Tholle, Commented Nov 7, 2018 at 18:31
@Tholle even though that does solve the error, I still cannot console log any of the items. I can't display them either. — ZombieChowder
– ZombieChowder, Commented Nov 7, 2018 at 20:48
The rooms in the response is an object with array values where each object in those arrays have one property. You most likely want to turn that data into a flat array if you want to use map on it in the render method. — Tholle
– Tholle, Commented Nov 7, 2018 at 20:52
@Tholle changed the api data with his here and it still gives the same result. Can't console log the elements or display the paragraph. — ZombieChowder
– ZombieChowder, Commented Nov 7, 2018 at 21:04

Khodor · Accepted Answer · 2018-11-07 18:28:24Z

1

React will first render before the fetch call is finished using the initial state. In your initial state there's no data.

Define data as an empty array in your initial state

constructor(props){
    super(props);
    this.state = {
        isLoading: true,
        rooms: [],
        data: []
   }
}

answered Nov 7, 2018 at 18:28

Khodor

1,0071 gold badge7 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Displaying Data with ReactJS - Cannot read property 'map' of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related