How to pass function with React Hooks? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to pass function with React Hooks? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

We are here to answer your question about How to pass function with React Hooks? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji