title: How to render a table from axios GET requests?
body: <p>I'm attempting to render a table of stats from an NBA API. I'm using redux to store the user's selected players and requesting the API through my Table component. I retrieve the stats appropriately however it ends up infinitely requesting the API. I know that me setting a hook within an asynchronous request will cause this behavior but I'm not sure of a workaround at the moment. I think this is a lifecycle error, should I try using useEffect and have the player object from the redux store in the dependency array? Any input would be great. I'll post the code below. </p>
  
  <p><strong>Here's a screengrab of the behavior and console log when I log cData:</strong> 
   <a href="https://imgur.com/3WNsZt9" rel="nofollow noreferrer">https://imgur.com/3WNsZt9</a></p>
  
  <p><strong>Table.js</strong></p>
  
  <pre><code>const DataTable = () =&gt; {
    const [completeData, setCompleteData] = React.useState([]);
    const players = useSelector(state =&gt; state.players);
    var cData = [];
  
    const search = async val =&gt; {
      try {
        const res = await axios(
          `https://www.balldontlie.io/api/v1/season_averages?player_ids[]=${val}`
        );
        const responseData = res.data.data;
        console.log(responseData);
        return responseData;
      } catch (err) {
        console.log(err);
      }
    };
  
    return (
      &lt;div&gt;
        &lt;h3&gt;2019-2020 Season Averages&lt;/h3&gt;
  
        &lt;Table responsive&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Player&lt;/th&gt;
              &lt;th&gt;Points&lt;/th&gt;
              &lt;th&gt;Assists&lt;/th&gt;
              &lt;th&gt;Rebounds&lt;/th&gt;
              &lt;th&gt;Steals&lt;/th&gt;
              &lt;th&gt;Blocks&lt;/th&gt;
              &lt;th&gt;Turnovers&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {Object.keys(players).map(function(item, i) {
              var currentPlayerData = {};
              currentPlayerData = search(players[item])
                .then(result =&gt; {
                  cData = JSON.parse(JSON.stringify(result[0]));
                  console.log(cData);
                  setCompleteData(old =&gt; [...old, cData]);
  
                  // setCurrentData(cData);
                })
                .catch(err =&gt; {
                  console.log(err);
                });
            })}
            {completeData &amp;&amp;
              completeData.map(function(item, i) {
                console.log(item);
                return (
                  &lt;tr key={i}&gt;
                    &lt;td&gt;{item.id}&lt;/td&gt;
                    &lt;td&gt;{item.pts}&lt;/td&gt;
                    &lt;td&gt;{item.ast}&lt;/td&gt;
                    &lt;td&gt;{item.reb}&lt;/td&gt;
                    &lt;td&gt;{item.stl}&lt;/td&gt;
                    &lt;td&gt;{item.blk}&lt;/td&gt;
                    &lt;td&gt;{item.turnover}&lt;/td&gt;
                  &lt;/tr&gt;
                );
              })}
          &lt;/tbody&gt;
        &lt;/Table&gt;
      &lt;/div&gt;
  </code></pre>