title: How to setState in React when async mapping through array and API call
body: <p>I'm trying to map() through my state, favorites, in React to fetch data from each entry in the state. The data should be stored in another state, stocks, and be displayed in a table.</p>
  <p>Map() through the state and fetching the data works, and I can see the date in the console log. But it will not be stored in the state.</p>
  <p>How do I add the data to the state?</p>
  <p>Here is the code:</p>
  <pre><code>  // Calling the function on component mount
    useEffect(() =&gt; {
        tableFetch();
    }, []);
  
    const [favorites, setFavorites] = useState([&quot;aapl&quot;, &quot;arlv&quot;]);
    const [stocks, setStocks] = useState([]);
  
      // fetch symbol data and stores it in stocks
        const tableFetch = () =&gt; {
          favorites.map( async (favorites) =&gt; {
            const data = await fetch(
                  `https://cloud.iexapis.com/stable/stock/${favorites}/quote?token=${token}`
                );
            const stocksData = await data.json();
            console.log(stocksData)
            setStocks(stocksData);
          });
        }
  </code></pre>