title: here is an API that changes after some time I want previous data to be stored in an array and latest data too I dont how to figure this out?
body: <p>I want <code>data</code> state to be an array which adds up the data when the data in the API changes
  such that it stores previous data as well as new data so I can map them and display them</p>
  <p>App.js</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  
  const App = () =&gt; {
    const [data, setData] = useState([]);
    const [entireData, setEntireDate] = useState([]);
    
  
    let arr = [];
    const fetchAPI = async () =&gt; {
      const API = await fetch(&quot;https://randomuser.me/api&quot;);
      const json = await API.json();
      let results = json.results;
      setData(results);
    };
  
    useEffect(() =&gt; {
      fetchAPI();
    }, []);
  
    useEffect(() =&gt; {}, [data]);
  
    return (
      &lt;&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;p&gt;
            {data.map((val, idx, arr) =&gt; {
              return val.login.username;
            })}
          &lt;/p&gt;
          &lt;img
            src={data.map((val, idx, arr) =&gt; {
              return val.picture.large;
            })}
            alt=&quot;getPicFromJson&quot;
          /&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>index.js</p>
  <pre><code>import { StrictMode } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  import App from &quot;./App&quot;;
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(
    &lt;StrictMode&gt;
      &lt;App /&gt;
    &lt;/StrictMode&gt;,
    rootElement
  );
  </code></pre>