ReactJS error TypeError: Cannot read property 'map' of undefined

Question

I'm attempting to consume a JSON API using fetch-api; the error mentioned above appears on the following line:

this.state.data.map( (dynamicData,key)=>

This is my ReactJS code with the error line in bold:

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

class App extends Component {

//constructor
constructor() {
  super();
  this.state = {
    data: [],
  }
} //end constructor

componentDidMount(){
  return fetch('https://jsonplaceholder.typicode.com/todos')
  .then((response)=>response.json())
  .then((responseJson)=>
{
  this.setState({
    data:responseJson.todos
  })
  console.log(this.state.data)
})
} // end component did mount

  render() {
    return (
      <div>
      <h2>Todo:</h2>
          <div>
          {
            **this.state.data.map( (dynamicData,key)=>**
            <div>
                <span> {dynamicData.userId} </span>
                <span> {dynamicData.id} </span>
            </div>
            )
          }
          </div>
      </div>
    );
  }
}

export default App;

Could I get some help as to what I'm doing wrong?

this is the url to the json am attempting to consume: jsonplaceholder.typicode.com/todos — user1724708
– user1724708, Commented Apr 26, 2018 at 2:53
hmm, you don't want to return your fetch() but not sure if that is the problem — Anthony
– Anthony, Commented Apr 26, 2018 at 2:56

Omar K · Accepted Answer · 2018-04-26 03:03:47Z

1

import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  state = {
    data:[],
    url: "https://jsonplaceholder.typicode.com/todos"
  };

  componentDidMount() {
    fetch(this.state.url)
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    const { data } = this.state;
    data && console.log(data);
    return (
      <div>
        {data &&
          data.map(item => <div> Hello User With Id: {item.userId} </div>)}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Your didMount should look like mine also, setState takes a callback so if you wanted to see what the data looked like it would be like this

this.setState({ data }, () => console.log(this.state.data))

In your render it looks like you forgot the parenthesis after the arrow function in map.

render() {
    return (
      <div>
      <h2>Todo:</h2>
          <div>
          {
            this.state.data.map((dynamicData,key)=> (
            <div>
                <span> {dynamicData.userId} </span>
                <span> {dynamicData.id} </span>
            </div>
            ))
          }
          </div>
      </div>
    );
  }

edited Apr 26, 2018 at 3:03

answered Apr 26, 2018 at 2:57

Omar K

3,4213 gold badges25 silver badges41 bronze badges

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

2 Comments

user1724708 Over a year ago

Omar, ...thank you! The data now load, one quick question, I notice all of the data load excepts for completed e.g item.completed ...is there some modification required in order for the completed to load too? ...thanks again

Omar K Over a year ago

yes check my code sandbox

<div>               {" "}               Hello User With Id: {item.userId}               {item.completed ? (                 <div> Completed </div>               ) : (                 <div> In Progress </div>               )}{" "}             </div>

Collectives™ on Stack Overflow

ReactJS error TypeError: Cannot read property 'map' of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related