call two functions within onchange event in react

Question

I am trying to call two functions with an onChange event for search functionality dynamically in react. in first function I am setting the state for a value and in second function I have to call the value and execute the function.

I was not able to call two functions at same time. I am not adding the mock JSON with this sample code.

 handleChange(e) {
   this.setState({ value: e.target.value.substr(0, 20) });
}
filterFunction(filteredSections) {
  let search = filteredSections;
  search = filteredSections.filter(somesection => somesection.insidesection && somesection.insidesection.name.toLowerCase().indexOf(this.state.value.toLowerCase()) !== -1);
return search;
    }
 render() {
    const filteredSections = othersection;
return(

<div>
<FormControl
    name="searching"
    placeholder="Searching"
    onChange={e => this.handleChange(e).bind(this)}
    onChange={() => this.filterFunction(filteredSections)}
/>
</div>
<div>
    {filteredSections.map(section =><othersection customization={section} } }
</div>
)
}

the expected should be onchange event has to be call both the functions.

Answer 1

You can only assign a handler to onChange once. When you use multiple assignments like that, the second one will overwrite the first one.

You will either have to make a handler that calls both functions, or use an anonymous function:

twoCalls = e => {
  this.functionOne(e)
  this.functionTwo()
}
.
.
.
<FormControl
    name="searching"
    placeholder="Searching"
    onChange={this.twoCalls}
/>

Or...

<FormControl
    name="searching"
    placeholder="Searching"
    onChange={e => { this.functionOne(e); this.functionTwo() }}
/>

Answer 2

if you need props you can use it

<FormControl
    name="searching"
    placeholder="Searching"
    onChange={e => { this.functionOne(e); this.props.functionTwo(e)}
/>