My React table is functioning well with all columns except for the country name column. I double-checked the API and everything seems to be in order, but I'm stuck on how to troubleshoot this issue.
const Table = () => {
const[country, setCountry] = useState([]);
const[toggle, setToggle] = useState(true);
const sortColumnNumber = (sort, columnName, data) => {
data = data.sort((a, b) => {
return sort ? b[columnName] - a[columnName] : a[columnName] - b[columnName];
});
}
useEffect(() => {
const loadData = async() => {
await fetch('https://api.covid19api.com/summary')
.then(response => response.json())
.then(data => {
const stats = data.Countries;
sortColumnNumber(toggle, 'TotalConfirmed', stats)
setCountry(stats);
})
}
loadData();
}, []);
return(
<React.Fragment>
<table className="table table-bordered table-stripped">
<thead >
<tr onClick={(e) =>{
setToggle(!toggle);
sortColumnNumber(toggle, e.target.className, country);
}} style={{cursor: "pointer"}} className="thead-dark">
<th className="Country" scope="col">Country</th>
<th className="TotalConfirmed" scope="col">Total Cases</th>
<th className="NewConfirmed" scope="col">New Cases</th>
<th className="NewDeaths" scope="col">New Deaths</th>
<th className="TotalDeaths" scope="col">Total Deaths </th>
<th className="TotalRecovered" scope="col">Total Recovered </th>
</tr>
</thead>
<tbody>
<CountryStats country={country} />
</tbody>
</table>
</React.Fragment>
)
}