How to pass function with React Hooks? Code Answer

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) => {
    event.preventDefault();
    this.setState({
        popup: !this.state.popup
    })
}

Then I was passing function:

<Popup hidePopUp={this.hidePopUp}/>

That’s my problem with Hooks:

const hidePopup = useCallback(
    (event) => {
        event.preventDefault();
        setPopup(!popup);
    }, []
);

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

And this is my button in Popup component:

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

Answer

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 => {
      event.preventDefault();
      setPopup(!popup);
    },
    [popup]
  );

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