I am trying to make a react app in which I am fetching data through API which works fine for a few seconds and then I get a blank screen and an error in the console which is as follows:
Console
: This is the browser console error
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
CountryWise.js : This is my component where i am performing all the operations
import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
const CountryWise = () => {
const [data, setData] = useState([]);
const [name, setName] = useState("pakistan");
const getCovidData = async () => {
const res = await fetch(
`https://api.covid19api.com/live/country/${name}/status/confirmed`
);
const actualData = await res.json();
setData(actualData);
};
getCovidData();
return (
<>
<div className="container-fluid mt-5">
<div className="main-heading">
<h1 className="mb-5 text-center">Covid-19 Tracker</h1>
<br />
<select
value={name}
onChange={(event) => {
setName(event.target.value);
}}
>
<option value="pakistan">Pakistan</option>
<option value="afghanistan">Afghanistan</option>
</select>
</div>
<div className="table-responsive">
<table className="table table-hover">
<thead className="table-dark">
<tr>
<th>Country</th>
<th>Date</th>
<th>Active Cases</th>
<th>Confirmed Cases</th>
<th>Deaths</th>
<th>Recovered</th>
</tr>
</thead>
<tbody>
{data.map((curElm, ind) => {
return (
<tr key={ind}>
<th>{curElm.Country}</th>
<td>{curElm.Date}</td>
<td>{curElm.Active}</td>
<td>{curElm.Confirmed}</td>
<td>{curElm.Deaths}</td>
<td>{curElm.Recovered}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</>
);
};
export default CountryWise;App.js : This is my app where i am rendering my CountryWise.js component
import React from "react";
import CountryWise from "./components/countryWiseData/Countrywise";
function App() {
return <CountryWise />;
}
export default App;index.js : Here is my index.js file where i am rendering App component
>Solution :
Replace getCovidData() with this Code
useEffect(() => {
getCovidData()
}, [name])