If passing an OnChange() as a prop, can it receive multiple functions in the parent component on ReactJs?

Question

I am newbie on React. I am passing this from child to parent component

   <div className="filter-module">
                <i className="fas fa-sign-in-alt icon"></i>
                    <input 
                        name= "availabilityFrom"
                        onChange={(e)=>handleDateIn(e.target.value, e.target.name)}
                        type="date" 
                 />
            </div>

and on the parent, passed as a prop, I'd like to use the same parameters to execute two different methods

 handleDateIn= {this.handleFilterInputsDates;this.handleFilterInputs}

But it is not working. Is it possible to make something similar? I've read many similar questions to mine here on SO, but any matched my doubt.

Thanks in advance: :D

Answer 1

You can't pass from child to parent. What you can do is pass a function from a parent to child and use that function in the child to update the parent since the function will fire in the parent.

Alternatively you can pass state hooks into the child and update them there and you will see that state being updated in the parent.

Essentially you cant pass up from child but you can pass something down from parent to child which the child can use to update the parent.

Answer 2

well without me knowing react i guess you want:

handleDateIn= function(v,n) {
   handleFilterInputsDates(v,n);
   handleFilterInputs(v,n);
}

Answer 3

I'm pretty sure this isn't possible, but there are a couple of different approaches you could take:

Add another prop so you'd have:

handleDateIn={this.handleFilterInputsDates} handleOtherIn={this.handleFilterInputs}

OR you could update your function to look at the event.target.type and then do something if it's a date, and something else otherwise.

function handleIn(event) {
    if (event.target.type === 'date') {
        //code for date input, maybe even another function
    } else {
        //code for other types
    }
}

You would only need a single prop then:

handleIn={this.handleIn}

Answer 4

You could write a function on your parent component and call the other functions individually, passing in the parameters you need.

handleDateIn = (value, name) => {
  this.handleFilterInputsDates(/* Add whatever parameters you need */);
  this.handleFilterInputs(/* Add whatever parameters you need */);
}

Answer 5

You can pass the 'event object' to the parent method:

onChange={(e)=> handleDateIn(e)}

In the parent component, you can split your calls to two different methods using one:

handleDateIn={this.handleFilters}

Assume we implement "handleFilters" like this

handleFilters = e => {
    this.handleFilterInputsDates(e.target.value);
    this.handleFilterInputs(e.target.name);
}

Hope I answered right.