App.js

 
import React, {useState, useEffect} from 'react';
import Axios from 'axios';
import './App.css';
import AutoComplete from './AutoComplete'

function App() {
  const [globalStats, setGlobalStats] = useState({})
  const [countryStats, setCountryStats] = useState({})
  const retriveStats = () => Axios.get('https://api.covid19api.com/summary')
    .then(res => {
        setGlobalStats(res.data.Global)
        setCountryStats(res.data.Countries)
      })
 
  useEffect(retriveStats, [])
  
  return  (
    <div className="App">
      <header>Covid19 Stats</header>
      {Object.entries(globalStats)
        .map(([key, value ], i) => (
        {/* cannot have more than one value that has ID global
            so changing to classname
         */}
          <div className='global' key={i}>
            <div id="key">{key}: </div>
            <div>{formatVal(value)}</div>
          </div>
        ))
      }

     <div className='App-Component'>
      <AutoComplete countryNames={countryStats && countryStats.map(c => c.Country)}/>
     </div>
    </div>
  );
}

export default App;