React: Uncaught TypeError: X is not a function

Question

I am trying to render a button in a react-table column. If I refactor the button to its own component, it complains that it's not a function.

Top level (ExampleReactTable.js):

const handleClick = () => setIsOpen(true); const columns = getTableColumns(handleClick);

Middle layer (getTableColumns.js):

Cell: () => <ExampleButton handleClick={() => handleClick()} />

Botton layer (ExampleButton.js):

const ExampleButton = handleClick => { console.log(handleClick); return ( <Box> <Button variation="text" onClick={() => handleClick()}> Click </Button> </Box> ); };

This errors out with handleClick is not a function.

If I don't refactor the button out, it works:

Cell: () => ( <Box> <Button variation="text" onClick={() => handleClick()}> Click </Button> </Box>)

Nick · Accepted Answer · 2021-03-05 03:07:23Z

You are not destructuring props, because the function received the props as an object, which you are passing to onclick as a function, resulting in the error, try this:

const ExampleButton = ({handleClick}) => { console.log(handleClick); return ( <Box> <Button variation="text" onClick={() => handleClick()}> Click </Button> </Box> ); };

This is the same as:

const ExampleButton = (props) => { console.log(handleClick); return ( <Box> <Button variation="text" onClick={() => props.handleClick()}> Click </Button> </Box> ); };

Collectives™ on Stack Overflow

React: Uncaught TypeError: X is not a function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related