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 · Accepted Answer · 2019-01-14 19:21:15Z

2

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 } />

answered Jan 14, 2019 at 19:21

0xc14m1z

3,7252 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

peter flanagan Over a year ago

Trying the first one, but still seem to get the same error. With the second one how will I pass the team in with this ?

wmp224 Over a year ago

the second example is written in point-free syntax medium.freecodecamp.org/…

bobcatBisto · Accepted Answer · 2019-07-01 15:33:02Z

1

It is undefined because the initial state from the hooks leads the compiler to believe it could possibly be undefined.

How about trying this ?

<Team name={team.name} onTeamClick={() => onTeamClick && onTeamClick(team)} />

answered Jul 1, 2019 at 15:33

bobcatBisto

565 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related