CODEWITHSUNDEEP
javascriptarraysjsonreactjs
rin_o
rin_o

Reputation: 91

React setState with nested Json

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 Response Api Call

Upvotes: 1

Views: 131

Answers (2)

UJJAVAL SHAH
UJJAVAL SHAH

Reputation: 79

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;

Upvotes: 1

gospecomid12
gospecomid12

Reputation: 1002

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>

)

Upvotes: 0

Related Questions