Cannot read property 'map' of undefined, why?

2
votes

This is my App.js file. I am trying to fetch data using fetch() What am I missing? Getting Error as TypeError: Cannot read property map of undefined". What is wrong? How do I get the result?
I'm following the reactjs tutorial, and I keep running into an issue when passing the value from the state of one component into another component. The error 'Cannot read property 'map' of undefined' is thrown when the map function in the CommentList component is executed. What would cause the prop to become undefined when fetching data? I also tried putting debugger, why it is not going inside the fetch call?

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

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      companyList:[]
    };
  }

  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => { res.json() })
      .then(
        res => {
          this.setState({
            companyList : res
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    return (
      <div className="App">
        1) DataGrid
        <UsingFetch datasource = {this.state.companyList}/>
      </div>
    );
  }
}

export default App;

This is my UsingFetch.js File

class UsingFetch extends Component{
  constructor(){
    super();
    this.state = {
      isLoaded:false,
    }
  }

  render() {
    return (
      <div>
        {this.props.datasource.map(item =>
          <div>
            {item.name}
          </div>
        )}
      </div>
    )
  }
}

This is my App.js and UsingFetch.js file. I am trying to fetch data using fetch(), What am I missing? Getting Error as:

TypeError: Cannot read property map of undefined"

What is wrong? How do I get the result?

2
reactjsfetch

2 Answers

1
votes

Since you are not returning anything from first then block. So res in second then block is undefined. you should use return in 

then(res => { res.json() })

Change to 

then(res => res.json())

or 

then(res => { return res.json() })
0
votes

You aren't using your isLoaded anywhere in your component? You also aren't passing anything into it. You should pass your state down and then assign it in setState.

In your App:

<UsingFetch datasource = {this.state.companyList} isLoaded={this.state.isLoaded}/>

And in your UsingFetch

constructor(){
  super();

   this.state = {
      isLoaded:this.props.isLoaded,
 }
   }

Or just check to see if the datasource is there or isLoaded.

<div>
{this.props.datasource && this.props.isLoaded?
<React.Fragment>
                     {this.props.datasource.map(item =>
                     <div>
                         {item.name}
                     </div>
                     )}
 </React.Fragment>
:
<React.Fragment></React.Fragment>