How to pass function with React Hooks?

Question

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>

In your first example, you're setting the hidePopUp prop to a function that takes a single argument. In your second example, you're setting the hidePopUp prop to a function that takes no arguments, and returns a function. Have you tried <Popup hidePopup={hidePopup} />? — Joe Clay
– Joe Clay, Commented May 8, 2019 at 14:20
You make a mistake in the name of the function. Prop name - hidePopup, function name - hidePopUp. 'Up' - from the upper case — Andrii Golubenko
– Andrii Golubenko, Commented May 8, 2019 at 14:21

HalfWebDev · Accepted Answer · 2019-05-08 14:28:37Z

2

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

answered May 8, 2019 at 14:28

HalfWebDev

7,74814 gold badges72 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FernandoH-G Over a year ago

Would you be able to change the value of popup in the child component via the passed in function? ***in childComponent togglePopUp(true)

Dharman · Accepted Answer · 2021-03-14 15:59:54Z

1

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.

edited Mar 14, 2021 at 15:59

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 14, 2021 at 15:54

Ramin Mammadzada

3674 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to pass function with React Hooks?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related