title: Passing Props From Parent To Child After Axios and UseEffect Render
body: <p>Struggling with passing a prop to a child component after a UseEffect and Axios call. This is my main call at the start of my <code>StandingsComponent</code>:</p>
  <pre><code>export const StandingsComponent = () =&gt; {
      const [payload, setPayload] = useState([]);
  
      const classes = useStyles();
  
      useEffect(() =&gt; {
          axios
              .get(
                  '$URL',
                  {
                      headers: {
                          'Content-Type': 'application/json',
                          'x-api-key': '$api-key'
                      }
                  }
              )
              .then(function (response) {
                  setPayload(response.data.teams);
              })
              .catch(function (error) {
                  console.log(error);
              });
      }, []);
  
      const groupA = payload.filter((team) =&gt; team.groupName === 1);
      const groupB = payload.filter((team) =&gt; team.groupName === 2);
  
      return (
          &lt;Column&gt;
              &lt;Row&gt;
                  &lt;GroupComponent
                      teams={groupA}
                  /&gt;
                  &lt;GroupComponent
                      teams={groupB} /&gt;
              &lt;/Row&gt;
          &lt;/Column&gt;
      );
  };
  </code></pre>
  <p>The <code>console.log()</code> for both groups are fine:</p>
  <pre><code>[{id: 5, name: &quot;Italy&quot;, groupName: 1},
  {id: 18, name: &quot;Switzerland&quot;, groupName: 1},
  {id: 21, name: &quot;Turkey&quot;, groupName: 1},
  {id: 22, name: &quot;Wales&quot;, groupName: 1}]
  </code></pre>
  <pre><code>[{id: 4, name: &quot;Russia&quot;, groupName: 2},
  {id: 6, name: &quot;Denmark&quot;, groupName: 2},
  {id: 13, name: &quot;Belgium&quot;, groupName: 2},
  {id: 25, name: &quot;Finland&quot;, groupName: 2}]
  </code></pre>
  <p>But when I get to <code>GroupComponent</code>, I'm not able to <code>console.log()</code> the values from the <code>teams</code> prop. I get the error: <code>TypeError: Cannot read property 'name' of undefined</code></p>
  <pre><code>export const GroupComponent = ({teams }) =&gt; {
      const theme = useTheme();
      const classes = useStyles({ theme });
  
      function renderStat(title, value) {
          return (
              &lt;Row horizontal='space-between' vertical='center'&gt;
                  &lt;span className={classes.itemTitle}&gt;{title}&lt;/span&gt;
                  &lt;span className={[classes.itemTitle, classes.itemValue].join(' ')}&gt;{value}&lt;/span&gt;
              &lt;/Row&gt;
          );
      }
  
      console.log(teams[0].name); //TypeError here
  
      return (
          &lt;CardComponent
              items={[
                  renderStat(teams[0].name, teams[0].id),
                  renderStat(teams[1].name, teams[1].id),
                  renderStat(teams[2].name, teams[2].id),
                  renderStat(teams[3].name, teams[3].id1)
              ]}
          &gt;&lt;/CardComponent&gt;
      );
  };
  
  export default GroupComponent;
  </code></pre>
  <p>I'm still getting my head around objects in JavaScript and async calls with the axios API. How do I pass the <code>teams</code> prop in to the <code>GroupComponent</code> and avoid the <code>undefined</code> error?</p>