title: Using an API to create data in a React-Table
body: <p>I'm super new to React.js in general and want to use this api here: <a href="https://covidtracking.com/api/v1/states/current.json" rel="nofollow noreferrer">https://covidtracking.com/api/v1/states/current.json</a> 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.</p>
  <pre><code>import React, { useMemo, useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import Table from &quot;./Table&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
    
    const [loadingData, setLoadingData] = useState(true);
    const columns = useMemo(() =&gt; [
      {
        Header: &quot;State&quot;,
        accessor: &quot;show.state&quot;,
      },
      {
        Header: &quot;Positive Cases&quot;,
        accessor: &quot;show.positive&quot;,
      },
      {
        Header: &quot;Recovered Cases&quot;,
        accessor: &quot;show.recovered&quot;,
        
  
      },
      {
        Header: &quot;Deaths&quot;,
        accessor: &quot;show.death&quot;,
      },
      {
        Header: &quot;Total Tested&quot;,
        accessor: &quot;show.total&quot;,
      }
    
    ]);
  
    const [data, setData] = useState([]);
  
    useEffect(() =&gt; {
      async function getData() {
        await axios
          (.get(&quot;https://covidtracking.com/api/v1/states/current.json&quot;)
          .then((response)) =&gt; {
        
            console.log(response.data);
            setData(response.data);
            setLoadingData(false);
          });
      }
      if (loadingData) {
        getData();
      }
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        {loadingData ? (
        ) : (
          &lt;Table columns={columns} data={data} /&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>