title: 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
body: <p>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:</p>
  <p><strong>Console</strong>
  : This is the browser console error</p>
  <pre><code>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.
  </code></pre>
  <p><strong>CountryWise.js</strong> : This is my component where i am performing all the operations</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useEffect, useState } from "react";
  import "bootstrap/dist/css/bootstrap.min.css";
  
  const CountryWise = () =&gt; {
    const [data, setData] = useState([]);
    const [name, setName] = useState("pakistan");
    const getCovidData = async () =&gt; {
      const res = await fetch(
        `https://api.covid19api.com/live/country/${name}/status/confirmed`
      );
      const actualData = await res.json();
      setData(actualData);
    };
  
    getCovidData();
  
    return (
      &lt;&gt;
        &lt;div className="container-fluid mt-5"&gt;
          &lt;div className="main-heading"&gt;
            &lt;h1 className="mb-5 text-center"&gt;Covid-19 Tracker&lt;/h1&gt;
            &lt;br /&gt;
            &lt;select
              value={name}
              onChange={(event) =&gt; {
                setName(event.target.value);
              }}
            &gt;
              &lt;option value="pakistan"&gt;Pakistan&lt;/option&gt;
              &lt;option value="afghanistan"&gt;Afghanistan&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div className="table-responsive"&gt;
            &lt;table className="table table-hover"&gt;
              &lt;thead className="table-dark"&gt;
                &lt;tr&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Active Cases&lt;/th&gt;
                  &lt;th&gt;Confirmed Cases&lt;/th&gt;
                  &lt;th&gt;Deaths&lt;/th&gt;
                  &lt;th&gt;Recovered&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {data.map((curElm, ind) =&gt; {
                  return (
                    &lt;tr key={ind}&gt;
                      &lt;th&gt;{curElm.Country}&lt;/th&gt;
                      &lt;td&gt;{curElm.Date}&lt;/td&gt;
                      &lt;td&gt;{curElm.Active}&lt;/td&gt;
                      &lt;td&gt;{curElm.Confirmed}&lt;/td&gt;
                      &lt;td&gt;{curElm.Deaths}&lt;/td&gt;
                      &lt;td&gt;{curElm.Recovered}&lt;/td&gt;
                    &lt;/tr&gt;
                  );
                })}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default CountryWise;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>App.js</strong> : This is my app where i am rendering my CountryWise.js component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import CountryWise from "./components/countryWiseData/Countrywise";
  
  function App() {
    return &lt;CountryWise /&gt;;
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>index.js</strong> : Here is my index.js file where i am rendering App component</p>