title: React callback onClick Cannot invoke an object which is possibly 'undefined'
body: <p>Below is my parent component which handles the <code>state</code> of the app.</p>
  
  <pre><code> function App() {   
      const [teamData, setTeamData] = useState&lt;any | undefined&gt;(undefined);
      return(
        &lt;&gt; 
            &lt;Teams teams={teams} onTeamClick={() =&gt; setTeamData(team)} /&gt;
            &lt;Modal teamData={teamData} /&gt;
        &lt;/&gt;
      )
  }
  </code></pre>
  
  <p>Next is my component which passes the state back up the tree. However, I am getting the following typescript error:</p>
  
  <blockquote>
    <p>Cannot invoke an object which is possibly 'undefined'.</p>
  </blockquote>
  
  <pre><code>type Props = {
     teams: any[];
     onTeamClick: () =&gt; void;
  }
  
  function Teams({teams, onTeamClick}: Props) {
     return(
       &lt;div&gt;
         {teams.map(team =&gt; {
           // the error is coming from onTeamClick
           // No error if I change it to onTeamClick={onTeamClick}
           &lt;Team name={team.name} onTeamClick={() =&gt; onTeamClick(team)} /&gt;
         })
       &lt;/div&gt;
     )
  }
  </code></pre>