this.props不是componentDidUpdate（）中的函数

Question

I'm facing a weird problem, there's probably a simple thing I didn't noticed but I'm not able to pass through this bug. Here's my case:

In the child, a counter is updated onClick. What I'm trying to do is fire a props function to togle the state of the parent.

In the child:

  componentDidUpdate(){
    if(this.state.counter === 3){
      return this.props.isFullBackgroundHomePage();
    }else{
      return;
    }
  } 

In the parent:

  renderHomePage = () => {
    if(this.state.isHomePage
      && this.state.home_page !== null){
      return (
        <HomePage
          isFullBackgroundHomePage={this.isFullBackgroundHomePage}
          triggerSeeAllSection={this.triggerSeeAllSection}
          {...this.state}
        />
      )
    }else{
      return null;
    }
  }

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

Now, this is what appears in the browser when the counter is at 3:

TypeError: this.props.isFullBackgroundHomePage is not a function

Link to the browser log: https://ibb.co/vcMW3wL

Answer 1

In

<HomePage
  isFullBackgroundHomePage={this.isFullBackgroundHomePage}
  triggerSeeAllSection={this.triggerSeeAllSection}
  {...this.state}
/>

you are overwriting prop isFullBackgroundHomePage using {...this.state} thus its not a function anymore rather a true/false boolean value at the consuming component. In your consuming component if you need both, you should rename state or prop value.

Very common issue unintentionally overwriting props using spread, gets the best of developer musing around what the heck is going on but to avoid such issues, consider using separate naming for function and state value to separate concerns.