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) =

Solution 1:

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

Solution 2:

Actually, you can use pass the function without using useCallback(). I had the similar issue today. Then I realized that I need to add const before the variable which you declared to assign function. Simply, you should add const before hidePopUp() you created, because you are using arrow function there.

The updated version of your function should be:

const hidePopUp = (event) => {
    event.preventDefault();
    this.setState({
        popup: !this.state.popup
    })
}

Extra note: I am not saying using useCallback is false which other people advised. I want to emphasize that the problem you faced is not about callback.