CODEWITHSUNDEEP
reactjs
wogsland
wogsland

Reputation: 9508

TypeError passing a function to a React click handler

My (simplified) React component looks like:

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

export default function MyList(setPanel) {

  const handleClick = () => {
    console.log(setPanel);
    setPanel('support');
  };

  return (
    <List>
      <ListItem button key="Support" onClick={handleClick}>
        <ListItemText primary="Support" />
      </ListItem>
    </List>
  );
}

and the console log is showing setPanel to be a function but then I'm getting a

TypeError: setPanel is not a function

when I click on the ListItem in the app. What am I missing here?

Upvotes: 1

Views: 19

Answers (1)

Sinan Yaman
Sinan Yaman

Reputation: 5937

You didn't destructure the props:

export default function MyList({setPanel})

Since props is an object containing setPanel, you are getting setPanel isn't a function.

Upvotes: 2

Related Questions