title: Cannot read property x of 'undefined' with ternary condition?
body: <p>I made a table with a dropdown menu that will filter the data shown. It loads correctly and I can toggle the individual teams but when I try to select All Teams (index 0) again I get an error saying property 'name' is undefined.</p>
  <p>What is wrong and how do I fix it?</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { flavours } from &quot;./mock-data&quot;;
  
  export default function App() {
    const [selectedFilter, setFilter] = useState(0);
  
    // start table
    const header = [
      { title: &quot;Banana&quot; },
      { title: &quot;Chocolate&quot; },
      { title: &quot;Vanilla&quot; },
      { title: &quot;Total&quot; }
    ];
    // render Table Headers
    const renderTableHeader = () =&gt;
      header.map((e, index) =&gt; {
        const { title } = e;
        return (
          &lt;th key={Number(index)}&gt;
            {title}
          &lt;/th&gt;
        );
      });
    const renderAllTeamData = () =&gt;
      flavours.map((team) =&gt; {
        const { name, banana, chocolate, vanilla } = team; // destructuring
        return (
          &lt;tr key={team.name}&gt;
            &lt;th
              style={{ textAlign: &quot;start&quot; }}
            &gt;
              {name}
            &lt;/th&gt;
            &lt;td&gt;{banana.length}&lt;/td&gt;
            &lt;td&gt;{chocolate}&lt;/td&gt;
            &lt;td&gt;{vanilla}&lt;/td&gt;
            &lt;td&gt;
              {banana.length + chocolate + vanilla}
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      });
    const renderTeamData = () =&gt; {
      const { name, banana, chocolate, vanilla } = flavours[selectedFilter - 1]; // destructuring
      return (
        &lt;tr&gt;
          &lt;th style={{ textAlign: &quot;start&quot; }}&gt;
            {name}
          &lt;/th&gt;
          &lt;td&gt;{banana.length}&lt;/td&gt;
          &lt;td&gt;{chocolate}&lt;/td&gt;
          &lt;td&gt;{vanilla}&lt;/td&gt;
          &lt;td&gt;{banana.length + chocolate + vanilla}&lt;/td&gt;
        &lt;/tr&gt;
      );
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;form&gt;
          &lt;select
            value={selectedFilter}
            onChange={(e) =&gt; setFilter(e.currentTarget.value)}
          &gt;
            &lt;option value={0}&gt;All Teams&lt;/option&gt;
            {flavours.map((value, index) =&gt; (
              &lt;option key={value.name} value={index + 1}&gt;
                {value.name}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/form&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt; &lt;/th&gt;
              {renderTableHeader()}
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {selectedFilter === 0 ? renderAllTeamData() : renderTeamData()}
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Here is a code sandbox too <a href="https://codesandbox.io/s/nice-brattain-pwnbr?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/nice-brattain-pwnbr?file=/src/App.js</a></p>