React setState with nested Json

Question

I just started to teach myself some React. In my first project I'm trying to create some basic charts with data from an Corona Dataset. The dataset gets created by my own restapi and looks like this:

[{
    "Bundesland": "Bayern",
    "Landkreis": "LK Erlangen-H\u00f6chstadt",
    "Altersgruppe": "A80+",
    "Geschlecht": "W",
    "AnzahlFall": 1,
    "AnzahlTodesfall": 0,
    "Meldedatum": 1577836800000,
    "IdLandkreis": "09572",
    "Datenstand": "05.01.2021, 00:00 Uhr",
    "NeuerFall": 0,
    "NeuerTodesfall": -9,
    "NeuGenesen": 0,
    "AnzahlGenesen": 1
  },
  {
    "Bundesland": "Nordrhein-Westfalen",
    "Landkreis": "SK K\u00f6ln",
    "Altersgruppe": "A35-A59",
    "Geschlecht": "W",
    "AnzahlFall": 1,
    "AnzahlTodesfall": 0,
    "Meldedatum": 1577923200000,
    "IdLandkreis": "05315",
    "Datenstand": "05.01.2021, 00:00 Uhr",
    "NeuerFall": 0,
    "NeuerTodesfall": -9,
    "NeuGenesen": 0,
    "AnzahlGenesen": 1
  }]

After I fetched the data by using the useEffect-Hook, I'm trying to use the useState-Hook to declare a new data variable that I can pass different react components

My current code method looks like this:

const [corona, setCorona] = useState([])

useEffect(() => {
    d3.json(path).then(res => { 
        let data = res
        setCorona(data)
    }).catch(err =>{console.log(err)})
},[])

I assume that the api call is working, since i can log the result. However, I am not able to declare corona by using my current setCorona method

Edit: This is the response from the api call

If you have verified that corona is set to the correct value then I am not sure what your actual issue is? I don't see anything obviously wrong in this code snippet. — Deadron
– Deadron, Commented Jan 6, 2021 at 18:53
Might be the problem that I am trying to use the whole json as value for corona? — rin_o
– rin_o, Commented Jan 6, 2021 at 19:06
While you might run into performance issues with rendering an overly large dataset there is nothing actually wrong with using it. Your question doesnt really make sense though. You don't declare corona when you call setCorona. You can mostly think of it as an assignment to corona. — Deadron
– Deadron, Commented Jan 6, 2021 at 19:09

UJJAVAL SHAH · Accepted Answer · 2021-01-06 19:28:38Z

1

React's setState is asynchronous. Do not reflect the change immediately (like console-log just after setState). I am assuming that's the issue.

import React, { useEffect, useState } from 'react';

const data = [{
    "Bundesland": "Bayern",
    "Landkreis": "LK Erlangen-H\u00f6chstadt",
    "Altersgruppe": "A80+",
    "Geschlecht": "W",
    "AnzahlFall": 1,
    "AnzahlTodesfall": 0,
    "Meldedatum": 1577836800000,
    "IdLandkreis": "09572",
    "Datenstand": "05.01.2021, 00:00 Uhr",
    "NeuerFall": 0,
    "NeuerTodesfall": -9,
    "NeuGenesen": 0,
    "AnzahlGenesen": 1
},
{
    "Bundesland": "Nordrhein-Westfalen",
    "Landkreis": "SK K\u00f6ln",
    "Altersgruppe": "A35-A59",
    "Geschlecht": "W",
    "AnzahlFall": 1,
    "AnzahlTodesfall": 0,
    "Meldedatum": 1577923200000,
    "IdLandkreis": "05315",
    "Datenstand": "05.01.2021, 00:00 Uhr",
    "NeuerFall": 0,
    "NeuerTodesfall": -9,
    "NeuGenesen": 0,
    "AnzahlGenesen": 1
}]

function Fun(props) {

    const [corona, setCorona] = useState([])

    const handleClick = () => {
        setCorona(data)
    }

    // This function logs value of corona.
    useEffect(() => {
        console.log('Logging corona to prove that it is updated.', corona);
    }, [corona]);

    return (
        <div>
            <button onClick={handleClick}> Click to update update corona. </button>
        </div>
    );
}

export default Fun;

answered Jan 6, 2021 at 19:28

UJJAVAL SHAH

793 bronze badges

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

2 Comments

rin_o Over a year ago

thanks for the answer, helps me a lot to understand the logic behind react! Instead of using a handleClick like you did in your example code, could I create an function that calls setState for example every 30secs?

UJJAVAL SHAH Over a year ago

@rin_o Check this. reactgo.com/react-setinterval

gospecomid12 · Accepted Answer · 2021-01-06 19:14:50Z

0

I dont really understand what u want to do..- Something like this?

const [corona, setCorona] = useState([])

useEffect(() => {
    d3.json(path).then(res => { 
        setCorona(res.data)
    }).catch(err =>{console.log(err)})
},[])

return (
  <div> {corona.map()..... and so on} </div>
OR
   <div> {corona[0].Bundesland} </div>

)

answered Jan 6, 2021 at 19:14

gospecomid12

1,0523 gold badges15 silver badges29 bronze badges

4 Comments

rin_o Over a year ago

I'm trying to set the json as array to the corona variable, so that I can implement the values from the array within the html or pass them to a different react component. The problem is that corona is an empty array, even after calling setCorona()

Zied Hf Over a year ago

@rin_o first console log 'res' after the 'then'. Take a look what did you get from the server. Then choose the right object and set it to your state corona. Then add another console log just before the return to see what value will be re-rendred in this variable. It should work.

rin_o Over a year ago

@ZiedHf thanks for your input, helped me a lot! However, if I'm using the example above, I get the TypeError: Cannot read property 'Bundesland' of undefined. The array is still empty. But, if I focus on one specific value from the json, I can return the value within the html

Zied Hf Over a year ago

@rin_o If the default value of corona is null, undefined or an empty array, then sure your app will crash. Write this instead : corona[ && corona[0] && corona[0].Bundesland

Collectives™ on Stack Overflow

React setState with nested Json

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related