如何通过两个组件传递功能？

Question

So I have a state :

toggleWatched:false

These are the four functions in App.js file that will be passed through to the MovieCard component :

    watchedMovie= () => {
    console.log("WATCHED MOOPIE");
}

notWatchedMovie = () => {
    console.log("HAVENT WATCHED MOOPIE");

}


handleChange= () => {
    this.setState({toggleWatched:!this.state.toggleWatched})
}

Toggling = () => {
    this.state.toggleWatched ? this.watchedMovie : this.notWatchedMovie;
}

Before passing to the MovieCard it has to be passed through the favorites component :

                              <Favorites
                                {...props}
                                handleChange={this.handleChange}
                                Toggling={this.Toggling}
                                toggleWatched={this.state.toggleWatched}
                            />

Then in favorites.js's render :

 const {
        Toggling,
        handleChange,
        toggleWatched,
    } = this.props;

Then it is passed to the movie card which is a constant component :

                            <MovieCard
                                handleChange={handleChange}
                                Toggling={Toggling}
                                toggleWatched={toggleWatched}

                            />

In the movie card it is used like :

const MovieCard = ({ handleChange,Toggling,}) 

I made a button in MovieCard which handles it :

               <button style={{fontSize:"14px"}} onClick={handleChange}>
           {
               Toggling
           }
            </button>

When I press the button, there's no error but nothing is consoled as well. I don't know what the error is. Can someone help me fix this?

Answer 1

I think I know the problem. Your function Toggling is not being invoked. A function will not be invoked by itself, you are only passing handleChange to the button onClick at MovieCard and so only function handleChange being invoked. And what it does is only setState for toggleWatched .

From your case, your handleChange function should be as following

handleChange= () => {
  this.setState({toggleWatched:!this.state.toggleWatched}, () => this.Toggling())
}

We are passing this.Toggling() as a second parameter of setState because this.setState is asynchronous

Answer 2

Your problem is the way you use function. Missing ()

Toggling = () => {
    this.state.toggleWatched ? this.watchedMovie() : this.notWatchedMovie();
}

And button in MovieCard must be use

<button style={{fontSize:"14px"}} onClick={handleChange}>
            <Toggling />
</button>

Or

<button style={{fontSize:"14px"}} onClick={handleChange}>
            {Toggling()}
</button>

Update: The button must have content, so I suggest U change MovieCard like that

<div>
   <button style={{fontSize:"14px"}} onClick={handleChange}>
        Click
   </button>
   <Toggling />
</div>

Answer 3

First of all, this will not be a good approach if you call your function like

<button style={{fontSize:"14px"}} onClick={handleChange}>
    {
        Toggling()
    }
</button>

What should be done is, you should call Toggling after the call of handleChange . Something like:

watchedMovie= () => {
    console.log("WATCHED MOOPIE");
}

notWatchedMovie = () => {
    console.log("HAVENT WATCHED MOOPIE");

}


handleChange= () => {
    this.setState({toggleWatched:!this.state.toggleWatched}, this.Toggling);
}

Toggling = () => {
    this.state.toggleWatched ? this.watchedMovie() : this.notWatchedMovie();
}