React Question / Material-UI and Destructuring

JavaScript
1

This works however when I destruct handleClick out of props I receive an error

const ReactComponent = (props) => {
     return(
       <div>
        <Button onClick= {props.handleClick} />
       </div>
)
}

When I do this I receive:

 Warning: Failed prop type: Invalid prop `onClick` of type `object` supplied to `ButtonBase`, expected `function`.

And then on click

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.

Is this a Material-UI issue where I can not destruct a function from props or am I doing something wrong?

const ReactComponent = ({handleClick}) => {
     return(
       <div>
        <Button onClick= {handleClick} />
       </div>
)
}
2

Can you post more code?

Where is the line where you destructed?

const { handleClick } = this.props;

3

Well the destruct occurs in the component call.

const ReactComponent = ({handleClick, ...props}) =>

Calling Component would be something like:

<ReactComponent handleClick={this.handleClick} />

However I’m not sure what I was doing wrong but it seems to be working as expected now.