How to delay return in React.js for load data from JSON

Question

So far, I have tried several methods that I found on the internet, but none has worked. I tried setTimeout and setting isLoading like in code right now.

As for loading the data, I am sure that they appear correctly because after deleting loading the brand in the paragraph, the data is visible in the console (more precisely in the React 'Components' add-on)

This is what a JSON file looks like:

[
   {
    id: 0,
    brand: "Lorem0",
    model: "Lorem",
    dealer: "Lorem",
    main_image: "Lorem",
    sections: [
        {
            id: 0,
            section_type: "",
            section_title: "Lorem",
            section_text: "Lorem Lorem Lorem Lorem Lorem",
            image_left: "Lorem1.png",
            image_center: null,
            image_right: null
        }
      ]
   },
   {
    id: 1,
    brand: "Lorem0",
    model: "Lorem",
    dealer: "Lorem",
    main_image: "Lorem",
    sections: [
        {
            id: 0,
            section_type: "",
            section_title: "Lorem",
            section_text: "Lorem Lorem Lorem Lorem Lorem",
            image_left: "Lorem1.png",
            image_center: null,
            image_right: null
        }
      ]
   },    
]

And this is the code from App.js:

state = {
   isLoading: true,
}
carData = [];

componentDidMount() {
   fetch("/data.json")
     .then(response => response.json())
     .then(data => {
       this.setState({
         carData: data,
         isLoading: false
       })
     })
 }
 render() {
   return (
     <div className="App">
       {!this.state.isLoading && <p>{this.carData[1].brand}</p>}
     </div>
   );
 }

Maybe I am making a mistake that I cannot see but it seems to me that everything is fine but the error still shows up.

TypeError: Cannot read property 'brand' of undefined

Jimbo Magusib · Accepted Answer · 2021-05-27 08:07:51Z

2

Also you can use optional chaining

this.state.carData[1]?.brand

answered May 27, 2021 at 8:07

Jimbo Magusib

2013 silver badges3 bronze badges

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

Comments

Priyank Kachhela · Accepted Answer · 2021-05-27 07:58:05Z

1

You are storing data in state but you are not trying to load data from state.

Try something like below:-

state = {
   isLoading: true,
   carData: []  // initialize carData with blank array in state 
}


componentDidMount() {
   fetch("/data.json")
     .then(response => response.json())
     .then(data => {
       this.setState({
         carData: data,
         isLoading: false
       })
     })
 }
 render() {
   return (
     <div className="App">
       {!this.state.isLoading && <p>{this.state.carData[1].brand}</p>}   // use carData with this.state.carData
     </div>
   );
 }

answered May 27, 2021 at 7:58

Priyank Kachhela

2,64511 silver badges17 bronze badges

1 Comment

D A R K VerbalCentaurPL Over a year ago

I learned that only what changes should be in state. Does one change like loading data from JSON also count for it?

Edward Wang · Accepted Answer · 2021-05-27 07:56:47Z

1

state = {
   isLoading: true,
   carData: [] // you should put the carData here.
}

componentDidMount() {
   fetch("/data.json")
     .then(response => response.json())
     .then(data => {
       this.setState({
         carData: data,
         isLoading: false
       })
     })
 }
 render() {
   return (
     <div className="App">
       {!this.state.isLoading && <p>{this.state.carData[1].brand}</p>}
     </div>
   );
 }

answered May 27, 2021 at 7:56

Edward Wang

313 bronze badges

Comments

Yushan · Accepted Answer · 2021-05-27 09:50:38Z

1

First, add carData as a property to the state object.

state = {
   carData: []  // add carData
}

Then you can remove the ìsLoading property if you insert the brand to JSX like this.

render() {
   return (
     <div className="App">
       <p>{this.state.carData[1]?.brand}</p>
     </div>
   );
 }

That ?. is called Optional Chaining. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

edited May 27, 2021 at 9:50

answered May 27, 2021 at 8:19

Yushan

1,0471 gold badge9 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to delay return in React.js for load data from JSON

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related