How to pass a key value into the onchange handler for a select dropdown

Question

I'm mapping an array[key,val] to dynamically create dropdowns. I want to pass the key from the select onChange handler so I can store the selected value in the correct index in the array. How do I pass the key.

 AdditionQueryArray.map((val, key) => {
    <Select
        onChange={this.AdditionalFieldHandleChange(key)}
        isMulti
        options={this.state.fieldOptions}
    />
}

AdditionalFieldHandleChange = (selectedOption,key) => {// saving selected option in array by key here}

score 0 · Answer 1 · answered Jul 20 '21 at 16:57

I think this is the answer you need: React js onClick can't pass value to method

example:

AdditionQueryArray.map((val, key) => {
    <Select
        onChange={() => this.AdditionalFieldHandleChange(key)}
        isMulti
        options={this.state.fieldOptions}
    />
}

AdditionalFieldHandleChange = (selectedOption,key) => {// saving selected option in array by key here}

Maybe add the "val" option to the arguments because you have two arguments in your function definition?

score 0 · Accepted Answer · answered Jul 20 '21 at 17:00

You could do something like this:

AdditionQueryArray.map((val, key) => {
    <Select
        onChange={this.AdditionalFieldHandleChange(key, event)}
        isMulti
        options={this.state.fieldOptions}
    />
}

AdditionalFieldHandleChange = (key, event) => {
const val = event.target.value //this will be the selected value
// saving selected option in array by key here
}

This way can be used for all types of form fields, be it input or selections.

How to pass a key value into the onchange handler for a select dropdown

2 Answers2