title: Display element of an array React
body: <p>I am passing through a variable called 'homeTeam' and when console logged it outputs</p>
  <pre><code>    abbreviation: &quot;Uls&quot;
      id: &quot;08ew458ius6f&quot;
      name: &quot;Ulster&quot;
  </code></pre>
  <p>A variable called 'awayTeam' outputs the same array but with data of a different team</p>
  <p>I have a bit of code to find out if I need the homeTeam or awayTeam abbreviation;</p>
  <pre><code>    const restartTeamAbbrevation = async (homeTeam, startTeamId, awayTeam) =&gt; {
      if (startTeamId == {homeTeam.id} ) {
         return homeTeam.abbreviation
      } else {
         return awayTeam.abbreviation
      }}
  </code></pre>
  <p>I then want this value to appear on my front end, i am attempting to use the following code;</p>
  <pre><code>        &lt;Modal.Body&gt;
          &lt;Row&gt;
              &lt;Col&gt;
                  &lt;div className=&quot;d-flex&quot;&gt;
                      &lt;span className=&quot;py-1&quot;&gt;Team: &lt;/span&gt;
                      &lt;span className=&quot;py-1&quot;&gt;{ restartTeamAbbrevation() }&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;/Modal.Body&gt;
  </code></pre>
  <p>I am getting the error</p>
  <pre><code>Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'id')
  </code></pre>