React callback onClick Cannot invoke an object which is possibly 'undefined'

Question

Below is my parent component which handles the state of the app.

 function App() {   
    const [teamData, setTeamData] = useState<any | undefined>(undefined);
    return(
      <> 
          <Teams teams={teams} onTeamClick={() => setTeamData(team)} />
          <Modal teamData={teamData} />
      </>
    )
}

Next is my component which passes the state back up the tree. However, I am getting the following typescript error:

Cannot invoke an object which is possibly 'undefined'.

type Props = {
   teams: any[];
   onTeamClick: () => void;
}

function Teams({teams, onTeamClick}: Props) {
   return(
     <div>
       {teams.map(team => {
         // the error is coming from onTeamClick
         // No error if I change it to onTeamClick={onTeamClick}
         <Team name={team.name} onTeamClick={() => onTeamClick(team)} />
       })
     </div>
   )
}

0xc14m1z 0xc14m1z · Accepted Answer · 2019-01-14T19:21:15

That's because here:

<Teams teams={teams} onTeamClick={() => setTeamData(team)} />

you are taking the team variable from nowhere, therefore it is undefined.

Doing this should be fine:

<Teams teams={teams} onTeamClick={ team => setTeamData(team) } />

I am not super familiar with React Hooks, but I think you might be able to do this, which is a bit shorter:

<Teams teams={teams} onTeamClick={ setTeamData } />

React callback onClick Cannot invoke an object which is possibly 'undefined'

2 Answers