React-select: cannot identify the component when handling onChange for multiple react-select components in my page

[humbletrader]

The onChange handler has only one parameter ( the current value(s) ). There should be at least a "name" parameter also sent via onChange so that I'm able to identify which of my multiple components in the page has changed.

[Codii]

Why would you do that ? Why do you need to get a "name" ?

It all depends on how you render these multiple components.. If you do that in a loop, there are various ways to do so, but you can associate one single onChange handler for every rendered react-select component.

If what you want to do is to have one onChange handler for all react-select components of "your page", it is probably not a good idea.

[humbletrader]

Imagine a page with a dynamic number of select components. Are you suggesting to create a dynamic number of onChange handlers ? .... No way.
Of course there are workarounds for this ... but in my view sending the name as a parameter ( or wrapped in some kind of event) would be the best approach.
Now, you do as you wish ...

[Codii]

I don't know what you mean by dynamic number of select components, that's my point. You should provide a little bit more context.

[humbletrader]

dynamic = decision at runtime ( i.e. I don't know how many components I will have in the page - it depends on the actions done by the user in other screens)
select = react-select

[Codii]

Does each of this react-select components refer to the same data ? What is supposed to happen when your onChange callback is called ? That's why I'm asking for code not text.

What I would do, if you don't want to use a specific callback for each of your components, is to create a High order function (in your render function for instance):

```javascript
render() {
const self = this;
const handleOnChange = function(fieldName) {
return function(newValue) {
self.setState(Object.assign(self.state, {
[fieldName] : newValue.value
});
}
}

return (

);
}

[humbletrader]

Do they refer to the same data ? mostly yes but the user may select different options for each of them .
The specific callback proposed by you was also my workaround ... but I see it as a workaround. In my view you should provide the name as a parameter.

[andy-shi88]

passing name in onChange as
onChange(name, value)
is quite usefull too i think, we can setState using {name: value} pair
That case give us the possibility to write just on handler to listen to changes of fields instead of writing one for each.
in my case I used this in setting state of one object of redux which contains several child, and having one handler to manage all those changes is really helpful.
I'd be happy to submit a PR if you'd let me...
let me know what you think. :+1:

[cbergmiller]

This can be done with a simple wrapper for Select (that may be needed in your app to customize Select further anyway). No need to break the existing API in my opinion.

class CustomSelect extends React.component {    
    handleChange = (option) => {
        // emulate standard input onChange event object
        this.props.onChange({
            target: {
                name: this.props.name,
                value: option ? option.value : null,
            },
        });
    };

    render() {
        const {onChange, ...props} = this.props
        return (
            <Select onChange={this.handleChange} {..props}/>
        );        
    }
}

[agirton]

Going to close this as this can be handled in user land.