Using an API to create data in a React-Table

Question

I'm super new to React.js in general and want to use this api here: https://covidtracking.com/api/v1/states/current.json to create a table with up-to-date COVID-19 data from American states. Problem is, when I render the app, I can't seem to upload the data into the table. Any help would be appreciated, thanks.

import React, { useMemo, useState, useEffect } from "react";
import axios from "axios";
import Table from "./Table";
import "./App.css";

function App() {
  
  const [loadingData, setLoadingData] = useState(true);
  const columns = useMemo(() => [
    {
      Header: "State",
      accessor: "show.state",
    },
    {
      Header: "Positive Cases",
      accessor: "show.positive",
    },
    {
      Header: "Recovered Cases",
      accessor: "show.recovered",
      

    },
    {
      Header: "Deaths",
      accessor: "show.death",
    },
    {
      Header: "Total Tested",
      accessor: "show.total",
    }
  
  ]);

  const [data, setData] = useState([]);

  useEffect(() => {
    async function getData() {
      await axios
        (.get("https://covidtracking.com/api/v1/states/current.json")
        .then((response)) => {
      
          console.log(response.data);
          setData(response.data);
          setLoadingData(false);
        });
    }
    if (loadingData) {
      getData();
    }
  }, []);

  return (
    <div className="App">
      {loadingData ? (
      ) : (
        <Table columns={columns} data={data} />
      )}
    </div>
  );
}

export default App;

Farhani Walid · Accepted Answer · 2020-05-21 02:54:27Z

12

import React, { useMemo, useState, useEffect } from "react";
import axios from "axios";
import Table from "./Table";
import "./App.css";

function App() {
  // here you set a state to tell the component it need to wait
  //  until the result is fetched from the api
  const [loadingData, setLoadingData] = useState(true);
  const columns = useMemo(() => [
    {
      Header: "State",
      accessor: "state",
    },
    {
      Header: "Positive Cases",
      accessor: "positive",
    },
    {
      Header: "Recovered Cases",
      accessor: "recovered",
    },
  ]);

  const [data, setData] = useState([]);

  useEffect(() => {
    async function getData() {
      await axios
        .get("https://covidtracking.com/api/v1/states/current.json")
        .then((response) => {
          // check if the data is populated
          console.log(response.data);
          setData(response.data);
          // you tell it that you had the result
          setLoadingData(false);
        });
    }
    if (loadingData) {
      // if the result is not ready so you make the axios call
      getData();
    }
  }, []);

  return (
    <div className="App">
      {/* here you check if the state is loading otherwise if you wioll not call that you will get a blank page because the data is an empty array at the moment of mounting */}
      {loadingData ? (
        <p>Loading Please wait...</p>
      ) : (
        <Table columns={columns} data={data} />
      )}
    </div>
  );
}

export default App;

edited May 21, 2020 at 2:54

answered May 21, 2020 at 2:06

Farhani Walid

9481 gold badge9 silver badges22 bronze badges

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

10 Comments

Vishnu Vennelakanti Over a year ago

I just tried that, but the same thing happened - just a blank page with no data on it other than the headers,

Farhani Walid Over a year ago

paste your Table component, i will change it and update my response with a working component

Farhani Walid Over a year ago

It working now with a small explanation about the problem.

Vishnu Vennelakanti Over a year ago

Did the table file need to be changed at all? because I'm getting the exact same result as before.

Farhani Walid Over a year ago

one sec i am looking at that

|

Collectives™ on Stack Overflow

Using an API to create data in a React-Table

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related