Using an API to create data in a React-Table
11,209
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;
Author by
Vishnu Vennelakanti
Updated on June 14, 2022Comments
-
Vishnu Vennelakanti about 2 years
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;