title: Handle Undefined Object Using JavaScript Find
body: <p>I have two teams in an array which have <code>id</code> 1 and 2:</p>
  <pre><code>{
     &quot;teams&quot;: [
              {
                  &quot;id&quot;: 1,
                  &quot;name&quot;: &quot;England&quot;,
                  &quot;groupName&quot;: 4
              },
              {
                  &quot;id&quot;: 2,
                  &quot;name&quot;: &quot;Germany&quot;,
                  &quot;groupName&quot;: 6
              }
      ]
  }
  </code></pre>
  <p>I have to make an API call to the backend which sometimes returns an id of 0 (which is not mapped in the array above). Here is the JSX code when I try to render it to a <code>Table</code>:</p>
  <pre><code>                        &lt;td style={{ width: '16.66%', wordBreak: 'break-all' }}&gt;
                              {teams.find((team) =&gt; team.id === fixture.team1Id).name}
                          &lt;/td&gt;
  </code></pre>
  <p>As a result, I get a <code>TypeError: Cannot read property 'name' of undefined</code> when <code>fixture.team1Id</code> is 0. How can I handle it on the front-end to return a string like &quot;TBC&quot; whenever <code>fixture.team1Id</code> is 0?</p>