title: React array returns undefined when i try to get specific element of it
body: <p>I tried to do 2 data fetches, one to fetch all the products and after that is finished i map all the products and fetch each one of them separately and put them into array. The behaviour that i don't understand occurs when i try to print the results. If i console.log the whole array, everything works fine, but if i try to do it with single array item it returns undefined. Don't ask why i need to fetch all the products separately.</p>
  <p>Here's the code.</p>
  <pre><code>
  import React, { useEffect, useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  export const Stackoverflow1 = () =&gt; {
    const [data, setData] = useState(&quot;&quot;);
    const [singleData, setSingleData] = useState(&quot;&quot;);
    const [finished, setFinished] = useState(false);
    const API = `${process.env.REACT_APP_SERVER_URL}/api/products`;
    useEffect(() =&gt; {
      const fetchData = () =&gt; {
        axios.get(API).then((response) =&gt; {
          setData(response.data);
          setFinished(true);
        });
      };
  
      fetchData();
    }, []);
  
    useEffect(() =&gt; {
      if (finished) {
        let list = [];
  
        data &amp;&amp;
          data.map(async (item) =&gt; {
            const API = `${process.env.REACT_APP_SERVER_URL}/api/products/${item.id}`;
            axios.get(API).then((response) =&gt; {
              list.push(response.data);
            });
          });
        setSingleData(list);
      }
    }, [finished, data]);
  
    return (
      &lt;div&gt;
        {data &amp;&amp;
          singleData &amp;&amp;
          data.map((item, index) =&gt; (
            &lt;div&gt;
              {item.name}
              {console.log(&quot;inside code without index&quot;, singleData)}
              {console.log(&quot;inside code with index&quot;, singleData[0])}
            &lt;/div&gt;
          ))}
      &lt;/div&gt;
    );
  };
  
  //Console logs:
  
  // inside html without index :
  // []
  // 0: {id: 381, name: 'Akvariumas 30l', description: 'Akvariumas 30l', price: 25.99, image_name: '16491014443.aquael-glossy-100-juodas.jpeg', …}
  // 1: {id: 391, name: 'Akvariumas 20l', description: 'akvariumas 20l', price: 12, image_name: '16491031283.aquarium3.jpeg', …}
  // 2: {id: 401, name: 'Akvariumas 30l', description: 'Akvariumas 30l', price: 150, image_name: '16491063713.aquarium4.jpeg', …}
  // length: 3
  // [[Prototype]]: Array(0)
  
  //inside html with index undefined
  </code></pre>