title: How to append multiple responses to useState in React?
body: <p>hope you can help me out a bit with this one! I'm sending multiple HTTP requests to get a list of movies. Currently, I'm using temp variable favMovies and pushing all results to it, and on the next .then() setting the state. This works fine, but I put a TODO comment and I feel there's a better way how to populate the state without additional .then(). Currently, if I uncomment my TODO, I only get 1 film added to my state... I'm obviously missing something.. Anyone can help?</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  
  interface Movie {
    Title: string;
  }
  
  function App() {
    const [favouriteMovies, setFavouriteMovies] = useState&lt;Movie[]&gt;([]);
  
    useEffect(() =&gt; {
      const url = 'http://www.omdbapi.com/?apikey=&lt;API_KEY&gt;&amp;i=';
      const ids = ['t1', 't2', 't3'];
      const promises = [];
      const favMovies: Movie[] = [];
      const requests = ids.map((id) =&gt; `${url}${id}`);
  
      for (let i = 0; i &lt; requests.length; i++) {
        promises.push(axios.get(requests[i]));
      }
  
      axios
        .all(promises)
        .then(
          axios.spread((...args) =&gt; {
            for (let i = 0; i &lt; args.length; i++) {
              favMovies[i] = args[i].data;
              // TODO: investigate why it's not appending all movies, but the last/first one
              // setFavouriteMovies([...favouriteMovies, args[i].data]);
            }
          })
        )
        .then(() =&gt; {
          setFavouriteMovies(favMovies);
        });
    }, []);
  
    return (
      &lt;div className='App'&gt;
        {favouriteMovies.length
          ? favouriteMovies.map((m: any) =&gt; (
              &lt;div key={Math.random()}&gt;{m.Title}&lt;/div&gt;
            ))
          : null}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>