TypeError passing a function to a React click handler

Question

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?

Sinan Yaman · Accepted Answer · 2021-08-16 12:28:05Z

2

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.

answered Aug 16, 2021 at 12:28

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

TypeError passing a function to a React click handler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related