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