How to pass additional parameters to onChange function in React

Question

So, I've faced this problem: I have this type of Element here, obviously there's event when changing the input, is it possible to pass params like this and access event as well? if so, how could I do it?

// this function accepts two other params index, stringValue
function onChange(index ,stringValue) {
    console.log(event.target.value);
    console.log("index?: " + index + " and value" + stringValue)
}

//this input is in Child Component
const index = 69;
const someRandomValue='iamstring';
<input defaultValue={name} onChange={onChange(index,iamstring)} />

Thunderbolt Engineer · Accepted Answer · 2020-10-12 19:02:25Z

7

You can use curried function to implement that.

onChange = (index, stringValue) => (event) => {
...
}

...

<input defaultValue={name} onChange={this.onChange(index,iamstring)} />

answered Oct 12, 2020 at 19:02

Thunderbolt Engineer

1,5639 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drew Reese · Accepted Answer · 2020-10-12 19:04:35Z

2

You can convert the handler to a curried higher order function to return a function to be used as the callback that accepts the click event object

function onChange(index,stringValue) {
  return (event) => {
    console.log(event.target.value);
    console.log("index?: " + index + " and value" + stringValue)
  };
}

Or you can proxy the event object through to the callback, remember to add the event object as an argument to the handler

function onChange(event, index ,stringValue) {
    console.log(event.target.value);
    console.log("index?: " + index + " and value" + stringValue)
}

<input defaultValue={name} onChange={e => onChange(e, index, iamstring)} />

answered Oct 12, 2020 at 19:04

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Comments

Flagship1442 · Accepted Answer · 2020-10-14 06:29:12Z

1

If you want you can make onChange into a function that returns another function.

Then you can do something like this:

const Element = () => {
  const index = 69;
  const iamstring = 'iamstring';

  const onChange = (index, stringValue) => event => {
    console.log(event.target.value);
    console.log('index?: ' + index + ' and value' + stringValue);
  };

  return <input defaultValue={name} onChange={onChange(index, iamstring)} />;
};

Bear in mind that the input's onChange prop expects a function, so you can only execute a function inside the onChange like this if that function is returning another function. (This is called a higher order function).

edited Oct 14, 2020 at 6:29

answered Oct 12, 2020 at 19:03

Flagship1442

1,7362 gold badges9 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to pass additional parameters to onChange function in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related