Cannot read property of data null in ReactJs when fetching from JSON

Question

I am new to react andtrying to fetch JSON data in React JS but getting this error:

TypeError: Cannot read property 'data' of null

My code is :

import React from 'react';

export default class FetchJson extends React.Component {

    componentDidMount()
    {
        fetch('https://api.myjson.com/bins/9i63i')
        .then((response) => response.json())
        .then((findresponse) =>{
            this.setState({ data: findresponse })
            //console.log(this.state.data);
            //console.log(findresponse.DesignName);

        })
    }

    render() {
        return(
            <ul>
                {this.state.data.map((x,i) => <li key={i}>{x.DesignName}</li>)}
            </ul>
        );
    }
}

You can see the json data here: http://myjson.com/9i63i I want to retrieve value for key DesignName which is part1 which is not happening. See the commented lines: both gives me the value. But when i try to access it inside return method inside render. I get error : TypeError: Cannot read property 'data' of null in this line:

{this.state.data.map((x,i) => <li key={i}>{x.DesignName}</li>)}

How to solve this?

Probably because render() runs before you're .then() the callback has set the state (as this happens asynchronously). Check that this.state is defined before you try and map it: {this.state && this.state.data.map((x,i)...} — Nick Parsons
– Nick Parsons, Commented Jan 16, 2020 at 8:16

SuleymanSah · Accepted Answer · 2020-01-16 08:20:05Z

2

DesignName is not an array in the response.

You can define your state like this:

 state = {
    data: null
  }

And display the DesignName using inline if with logical && operator to solve null problem.

  render() {   
    return (
      <div>
        DesignName: { this.state.data && this.state.data.DesignName}
      </div>
    );
  }

Codesandbox

answered Jan 16, 2020 at 8:20

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

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

7 Comments

Anish Arya Over a year ago

thanks, conditional rendering solved my problem and the data was retrieved by this.state.data.DesignName.

Anish Arya Over a year ago

done. Also i need access nested data, if you see the json then inside ComponentInfo there are ComponentName, FkComponentCategory, PartNumber, Manufacturer, Power, ComponentLevelPassPercentage. How can I access those? I tried this.state.data.ComponentInfo.ComponentName But didn't worked

SuleymanSah Over a year ago

@AnishArya ComponentInfo is an array. You can access it by index this.state.data.ComponentInfo[0].ComponentName or if you want to display them you can use map.

Anish Arya Over a year ago

that worked, how to access whole array and display?

SuleymanSah Over a year ago

@AnishArya try to use map, I will update codesandbox later.

|

Berk Arslan · Accepted Answer · 2020-01-16 08:49:48Z

2

You can use an isLoading flag while waiting for your api call to finish.

state = {
   data: null,
   isLoading:true
}

render() { 
  if(this.state.isLoading) { 
    return(<div>loading</div>); 
  }
  return(
   <ul>
    {this.state.data.map((x,i) => <li key={i}>{x.DesignName}</li>)}
   </ul>
  );

when your api call has finished, you can update the state like this:

this.setState({ data: findresponse, isLoading:false })

edited Jan 16, 2020 at 8:49

answered Jan 16, 2020 at 8:35

Berk Arslan

213 bronze badges

1 Comment

Tristan Trainer Over a year ago

Welcome to Stack Overflow, I endorse this answer as a clean solution to the issue.

Collectives™ on Stack Overflow

Cannot read property of data null in ReactJs when fetching from JSON

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related