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?

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