Passing a function to select html in React

Question

I mapping over data which displays different select option dropdowns. I need my onChange function to be on the select tag to capture the selected option, but the select tag is before the function is initialized so I'm not sure how to go about passing the function into it.

                <select onChange={onChange}>  <--- onChange function cant be passed  here
                    {options.map((attribute) => {
                        function onChange(event) {
                            const newSelected = { ...selected };
                           newSelected[attribute.title] = event.target.value
                        }

                        return (
                            <option value={attribute.index}>{attribute.value}</option>
                        )
                    })}
                </select>

This answer might seem trite or dismissive, but I don't mean it to be: I think the answer is, Don't do it that way. You shouldn't be defining onChange in the .map function — TKoL
– TKoL, Commented Jul 27, 2021 at 10:07
It conceptually doesn't make sense. <select onChange={onChange}> implies a singular onChange function, but you're defining a new onChange function in every iteration of .map. — TKoL
– TKoL, Commented Jul 27, 2021 at 10:09

T.J. Crowder · Accepted Answer · 2021-07-27 10:13:53Z

1

Define your onChange so that it uses the information on the event object it receives to find the right entry in the list, something like this:

<select onChange={event => {
    const attribute = options[event.currentTarget.value];
    const newSelected = {
        ...selected,
        [attribute.title]: event.currentTarget.value,
    };
    // ...
}}>
    {options.map((attribute, index) => {
        return (
            <option key={attribute.value} value={index}>{attribute.value}</option>
        )
    })}
</select>

It's hard to be sure the details of that are right without knowing the structure of options or what you want newSelected to be, but I think I've mostly inferred it from the question's code. Note that I changed attribute.index to index in the map call, and that I added a key (you need key on any array you render), assuming that attribute.value is unique.

That said, if attribute.value is unique, I think I'd use it instead of index or attribute.index:

<select onChange={event => {
    const attribute = options.find(({value}) => value == event.currentTarget.value);
    const newSelected = {
        ...selected,
        [attribute.title]: attribute.index,
    };
    // ...
}}>
    {options.map(({value}) => {
        return (
            <option key={value} value={value}>{value}</option>
        )
    })}
</select>

edited Jul 27, 2021 at 10:13

answered Jul 27, 2021 at 10:11

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

4 Comments

TKoL Over a year ago

You beat me to it, and with code at that!

TKoL Over a year ago

I commented a critique about the index field but you already fixed it. Fully agreed on that count now!

walker1 Over a year ago

This is what I was trying to achieve, thanks I poorly worded the question.

T.J. Crowder Over a year ago

@walker1 - Can't have been that bad, I and others understood it! :-) Happy coding.

TKoL · Accepted Answer · 2021-07-27 10:11:56Z

1

I think I sort of see why you're doing it the way you're doing it, so let me try to address how to handle it differently:

First of all, you're doing it because the onChange function needs access to the attribute.title value. So for you, you're thinking the easiest way to get that value is to define the function in the .map function, where you have access to each individual attribute as it's coming through.

You can't, though. As I said in my comment: It conceptually doesn't make sense. <select onChange={onChange}> implies a singular onChange function, but you're defining a new onChange function in every iteration of .map.

So what you need to do is define onChange before your render function, and then inside that you have to find the matching attribute inside the options array, so that you can then use attribute.title as you like.

[edit] TJ Crowder gives a specific code example of how to do that.

answered Jul 27, 2021 at 10:11

TKoL

13.9k4 gold badges49 silver badges87 bronze badges

1 Comment

walker1 Over a year ago

That was my thought process yes. Thanks that completely makes sense I have found this very useful

Collectives™ on Stack Overflow

Passing a function to select html in React

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related