How to pass function with React Hooks?

How can I pass function with React Hooks? I’ve used useCallback, but it shows an error that it is not a function.

In class component I was doing it like this:

hidePopUp = (event) => {
        popup: !this.state.popup

Then I was passing function:

<Popup hidePopUp={this.hidePopUp}/>

That’s my problem with Hooks:

const hidePopup = useCallback(
    (event) => {
    }, []

<Popup hidePopup={() => hidePopup}/>

And this is my button in Popup component:

<button onClick={(event)=>this.props.hidePopUp(event)}></button>


First of all spelling mistakes and some common mistakes in passing reference to same function. Otherwise it shouldn’t be a problem at all passing the memoized version of this function at all.

Working demo here.

Second, there is no actual use of useCallback being seen here.

You should use a dependency to update your function to represent correct value of popup variable. Here’s how:

const togglePopUp = useCallback(
    event => {

Third, when you pass the function as prop, you can pass that directly the reference

<Popup hidePopup={togglePopUp}/>

Note – I’ve renamed your hidePopUp to togglePopUp