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-21T02:54:27.400

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 '20 at 02:54

answered May 21 '20 at 02:06

Farhani Walid

927
1
9
20

1

I just tried that, but the same thing happened - just a blank page with no data on it other than the headers, – Vishnu Vennelakanti May 21 '20 at 02:11
paste your Table component, i will change it and update my response with a working component – Farhani Walid May 21 '20 at 02:15
It working now with a small explanation about the problem. – Farhani Walid May 21 '20 at 02:24
Did the table file need to be changed at all? because I'm getting the exact same result as before. – Vishnu Vennelakanti May 21 '20 at 02:34
one sec i am looking at that – Farhani Walid May 21 '20 at 02:36
updated my answer, the problem was with the accessor which must be the key name you were accessing show.state when show is undefined so you have to remove the show to access the value of the key directly – Farhani Walid May 21 '20 at 02:45
tsym, it works for me. I didn't know the accessors had to be changed. – Vishnu Vennelakanti May 21 '20 at 02:49
as said this is the key name of your object, do not forget to accept the answer, and good luck with react :) – Farhani Walid May 21 '20 at 02:51
One last question - there are gaps in "recovered", does this mean the API shows nothing with that data itself? – Vishnu Vennelakanti May 21 '20 at 02:52
yes actually i have added the object logged on the console for AL state and as you can see the recovered is null so the problem is with the api – Farhani Walid May 21 '20 at 02:56

Using an API to create data in a React-Table

1 Answers1

Linked