'Can't avoid re-render while fetching data with async with useState

`import React, { useState, useEffect } from 'react'; import { Container } from 'react-bootstrap';

import "regenerator-runtime/runtime"; import { CovidTable } from './CovidTable';

export const Covid = () => {

const [covidData, setCovidData] = useState([]);

useEffect(() => {
    gettingData();
}, []);

const gettingData = async () => {

    const newUrl = 'https://api.covid19api.com/live/country/uruguay';
    const newResp = await fetch(newUrl);
    const theResp = await newResp.json();

    console.log(theResp);

    const covidArray2 = [
        [[theResp[0].Active], [theResp[1].Active], [theResp[2].Active], [theResp[3].Active], [theResp[4].Active]],
        [[theResp[0].Confirmed], [theResp[1].Confirmed], [theResp[2].Confirmed], [theResp[3].Confirmed], [theResp[4].Confirmed]],
        [[theResp[0].Deaths], [theResp[1].Deaths], [theResp[2].Deaths], [theResp[3].Deaths], [theResp[4].Deaths]],
        [[theResp[0].Recovered], [theResp[1].Recovered], [theResp[2].Recovered], [theResp[3].Recovered], [theResp[4].Recovered]],
    ];
    setCovidData(covidArray2);
}

return (<>
    {covidData.map((covidArray2) => (
        <Container style={{ minHeight: 'calc(100vh 0)' }}>
            <CovidTable
                Active1={covidArray2[0][0]}
                Active2={covidArray2[0][1]}
                Active3={covidArray2[0][2]}
                Active4={covidArray2[0][3]}
                Active5={covidArray2[0][4]}
                Confirmed1={covidArray2[1][0]}
                Confirmed2={covidArray2[1][1]}
                Confirmed3={covidArray2[1][2]}
                Confirmed4={covidArray2[1][3]}
                Confirmed5={covidArray2[1][4]}
                Deaths1={covidArray2[2][0]}
                Deaths2={covidArray2[2][1]}
                Deaths3={covidArray2[2][2]}
                Deaths4={covidArray2[2][3]}
                Deaths5={covidArray2[2][4]}
                Recovered1={covidArray2[3][0]}
                Recovered2={covidArray2[3][1]}
                Recovered3={covidArray2[3][2]}
                Recovered4={covidArray2[3][3]}
                Recovered5={covidArray2[3][4]}
            />
        </Container>))}
</>
)

} `

Thanks guys!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source