use state is not working in useffect and showing this error

Question

In use effect function, after calling an API,we used the useState function to set the value but when we printing the console.log then it prints "null".It means the value of state_data not set.When I render the state_data ,it showing me a error as shown below .

import React, { useEffect, useState } from 'react';
import Navbar from '../Home/Header/Header';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from '../Home/Header/Header';
import { Button, Card, Col, Container, Row, Spinner, Table } from 'react-bootstrap';
import Chart from "react-google-charts";
import Trackers from './Trackers';
import Charts from './Charts';
import Tables from './Tables';
import Carousels from './Carousels';
import Axios from 'axios';
import './Covid_Update.css';


function Covid_Update() {

  const [state_data,set_state_data]=React.useState(null);
  useEffect(() => {

    Axios.get("https://api.covid19india.org/data.json").then(function (val) {
    set_state_data(val.data["statewise"]);
    console.log(state_data);   
   
  })
  },[])

  return (
    <>
      { 
      state_data==null?<Container id="load"><center><Spinner animation="grow" variant="dark" size="100" /></center></Container>:<div>
      {state_data}
      </div>
            }

    </>
  );
}
export default Covid_Update;

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
    in Covid_Update (created by Context.Consumer)
    in Route (at App.js:17)
    in Switch (at App.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:12)
    in main (at App.js:11)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Please Help me out!!!

You're logging the old state (which can't change -- it's a `const` -- and wouldn't change even if it weren't a `const`). The new state gets set by the state setter and then your component function gets called again to re-render, and gets the new state in a new `state_data` constant. — T.J. Crowder, Nov 18 '20 at 13:36

wangdev87 · Accepted Answer · 2020-11-27T08:55:10.327

0

set_state_data is the asynchronous method and you can't get the updated state_data immediately after set_state_data. You should get the updated value in the other useEffect by adding a dependency.

useEffect(() => {
  console.log(state_data);
}, [ state_data ]);

According to your error result, state_data is the object, and you need to convert it to the string to show inside the DOM.

      state_data==null?<Container id="load"><center><Spinner animation="grow" variant="dark" size="100" /></center></Container>:<div>
      {JSON.stringify(state_data)}
      </div>

edited Nov 27 '20 at 08:55

answered Nov 18 '20 at 13:33

wangdev87

8,611
3
8
31

This is an ***often*** repeated duplicate. Further answers aren't necessary, just pointing at previous ones (perhaps with a helpful comment). – T.J. Crowder Nov 18 '20 at 13:34
Error: Objects are not valid as a React child (found: object with keys {active, confirmed, deaths, deltaconfirmed, deltadeaths, deltarecovered, lastupdatedtime, migratedother, recovered, state, statecode, statenotes}). If you meant to render a collection of children, use an array instead. in div (at Covid_Update.js:35) in Covid_Update (created by Context.Consumer) in Route (at App.js:17) in Switch (at App.js:14) in Router (created by BrowserRouter) in BrowserRouter (at App.js:12) in main (at App.js:11) in App (at src/index.js:9) – ashish Arora Nov 27 '20 at 06:43
Still getting this error – ashish Arora Nov 27 '20 at 06:44
what is the error you have tried? – wangdev87 Nov 27 '20 at 06:46
what is the console.log(val.data["statewise"]) result? – wangdev87 Nov 27 '20 at 08:38
are you sure it is the string? rather than either object or array? – wangdev87 Nov 27 '20 at 08:40
val is a json response – ashish Arora Nov 27 '20 at 08:48
then that is the issue, you need to convert it to the string, using JSON.stringify() – wangdev87 Nov 27 '20 at 08:48
1

thanks a lot !! Its worked, I really appreciate you for helping me – ashish Arora Nov 27 '20 at 08:53

use state is not working in useffect and showing this error

1 Answers1