React overwrite component function

Question

I'm trying to do the following, currently I have 3 components:

Parent.js:

class Parent extends Component {
  applyFilters = () => {console.log("applying original filters")}

  setApplyFilters = (callback) => {
    this.applyFilters = () => callback();
  }

  render(){
    return(
      <div>
        <Filters applyFilters={this.applyFilters} />
        <Screen1 setApplyFilters={this.setApplyFilters} />
      </div>
    )
  }
}

Filters.js:

class Filters extends Component {
  onButtonPress = () => {
    this.props.applyFilters(),
  }

  render(){
    ...
  }
}

Screen1.js:

class Screen1 extends Component {
  applyFilter = () => {
    console.log("Applying filters using the callback function in Screen1");
  }

  componentDidMount = () => {
    this.props.setApplyFilters(() => this.applyFilters());
  }

  render(){
    ...
  }
}

I have a Filters component that is common to all the screens. I have multiple screens of the type Screen1.

I want to on componentDidMount of the current screen pass the applyFilter function as a callback to the parent, and from the parent pass the applyFilter as a prop to the Filter component. When the onButtonPressed handler of the filter is called, it should execute the applyFilter callback for the mounted screen.

But for some reason it just prints to the console "applying original filters" which is the original string, as if the function is not being overwritten with the callback from the screen.

How do I do this correctly?

Answer 1

The this.applyFilters is resolved early during the render process to () => {console.log("applying original filters")}

<Filters applyFilters={this.applyFilters} />

In this scenario you only care for its value at the time that the function it references is invoked, so you want to set it lazily.

<Filters applyFilters={() => this.applyFilters()} />

This way when applyFilters invoked in Filters component, the value that is referenced in this.applyFilters is resolved and then invoked.