title: React Hook, Array of objects from different call of Axios
body: <p>I got this:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import axios from &quot;axios&quot;;
  
  function InsideRacesComponent() {
  
      const route = &quot;http://localhost:4000/api/standings&quot;;
      const [data, setData] = useState([{ raceName: &quot;&quot;, raceCountryFlag: &quot;&quot; }]);
  
      useEffect(() =&gt; {
          axios.get(route).then(res =&gt; {
  
              //The arrays that I want to fetch data and combine
              const raceNameData = res.data[0].InsideRaceResults
              const raceCountryData = res.data[0].RaceResults
  
              
              raceNameData.forEach(races =&gt; {
                  const raceName = races.gpId;
              });
  
  
              raceCountryData.forEach(races =&gt; {
                  const flagLink = races.gpCountryImage;
              })
          })
      }, []);
  
      return (
        //some html
      )
  
  }
  </code></pre>
  <p>If I log raceNameData it looks like this:</p>
  <pre><code>(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  0: {_id: &quot;5fe8c55830013624e4716eed&quot;, gpId: &quot;Austrian Grand Prix&quot;, grandPrixDate: &quot;Sunday, July 5&quot;, grandPrixTrack: &quot;Red Bull Ring&quot;, RaceResult: Array(20)}
  1: {_id: &quot;5fe8c55830013624e4716f02&quot;, gpId: &quot;Styrian Grand Prix&quot;, grandPrixDate: &quot;Sunday, July 12&quot;, grandPrixTrack: &quot;Red Bull Ring&quot;, RaceResult: Array(20)}
  2: {_id: &quot;5fe8c55830013624e4716f17&quot;, gpId: &quot;Hungarian Grand Prix&quot;, grandPrixDate: &quot;Sunday, July 19&quot;, grandPrixTrack: &quot;Hungaroring&quot;, RaceResult: Array(20)}
  ...
  </code></pre>
  <p>And raceCountryData like this:</p>
  <pre><code>(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  0: {_id: &quot;5fe8c55830013624e4716edc&quot;, gpCountryName: &quot;Austria&quot;, gpCountryImage: &quot;https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png&quot;}
  1: {_id: &quot;5fe8c55830013624e4716edd&quot;, gpCountryName: &quot;Austria&quot;, gpCountryImage: &quot;https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png&quot;}
  2: {_id: &quot;5fe8c55830013624e4716ede&quot;, gpCountryName: &quot;Hungary&quot;, gpCountryImage: &quot;https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Hungary.svg/1920px-Flag_of_Hungary.svg.png&quot;}
  ...
  </code></pre>
  <p><strong>Im looking for this when I log data from React Hook</strong></p>
  <pre><code>console.log(&quot;data: &quot; + data);
  
  // data: [{ raceName: &quot;Austrian Grand Prix&quot;, raceCountryFlag: &quot;https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png&quot; }, { raceName: &quot;Styrian Grand Prix&quot;, raceCountryFlag: &quot;https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png&quot; } , { raceName: &quot;Hungarian Grand Prix&quot;, raceCountryFlag: &quot;https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Hungary.svg/1920px-Flag_of_Hungary.svg.png&quot; }, ...]
  
  </code></pre>
  <p>I've tried with this in each one of the &quot;array.forEach&quot;:</p>
  <pre><code>setData(prevValue =&gt; [...prevValue, { raceName: raceName, raceCountryFlag: &quot;&quot; }]
  
  //and
  
  setData(prevValue =&gt; [...prevValue, { raceName: &quot;&quot;, raceCountryFlag: flagLink }]
  
  </code></pre>
  <p>of course my aproach has not logic ...</p>
  <p>Thanks!</p>