React-Select custom options array?

Question

I'm trying to use react-select, https://react-select.com/, and the mandatory format for the options prop seems to be {value:something, label:something}.

I have a list of objects with other key,value pairs and my question is if there is any workaround for me not having to modify the array because if i modify it, it means that the select component will not return an object of the initial array so i will have to map them again.

options = [
    {name: 'opt1', descr:'descr1'},
    {name: 'opt2', descr:'descr2'},
    {name: 'opt3', descr:'descr3'},
]

In Vue i get to choose the key that will be used as label, for example.

Vue:

:items="options.name"

In react i would have to do something like:

this.new_options = []
this.options.forEach(element => {
    this.new_options.push({
        value : element.name,
        label : element.name,
    })
})

And in Select:

                  <Select
                        name="selectedWires"
                        //closeMenuOnSelect={false}
                        components={makeAnimated()}
                        onChange={this.handleSelectChange('selectedWires')}
                        options={this.new_options}
                        isMulti
                    />

don't modify the array, create a copy of it in the desired format — Sabbin
– Sabbin, Commented Feb 18, 2019 at 12:17
@Sabbin yes but the select will return an object of the copied array, which i have to map to the corresponding object of the initial array, right? — Mike Vlad
– Mike Vlad, Commented Feb 18, 2019 at 12:19
yes you can. It depends on what functionality you have.. what do you do with the selected values? — Sabbin
– Sabbin, Commented Feb 18, 2019 at 12:23
I send them to the backend, but i need to send the original objects in order to identify them in the database, not a modified version of the same object. In the above case, i need to send {name: 'opt1', descr:'descr1'} and not {value:'opt1', label:'opt1'}. If i send the latter, i'll have to search the db and compare name with value. — Mike Vlad
– Mike Vlad, Commented Feb 18, 2019 at 12:26
So you need both value and descr in the backend? why don't you serialize that in the value, and keep the label only with the name — Sabbin
– Sabbin, Commented Feb 18, 2019 at 12:29

Agney · Accepted Answer · 2019-02-18 12:55:49Z

24

With react-select you can map options with:

const options = [
  { val: 'chocolate', desc: 'Chocolate' },
  { val: 'strawberry', desc: 'Strawberry' },
  { val: 'vanilla', desc: 'Vanilla' }
]

<Select
  options={options}
  getOptionLabel={(option)=>option.desc}
  getOptionValue={(option)=>option.val}
/>

Docs

Live Demo

answered Feb 18, 2019 at 12:55

Agney

19.3k7 gold badges60 silver badges76 bronze badges

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

Comments

Johan Malan · Accepted Answer · 2019-02-18 13:06:11Z

2

You could use the index as the value, then just get the original array element in the handleChange function.

<Select 
    name="selectedWires"
    options={this.options.map((option, idx) => ({
        value: idx,
        label: option.name
    }))} 
    onChange={(selection, action) => this.handleChange(selection, action)}/>

Then in the handle function:

handleChange(selection, action) {
    let selectedOption = this.options[selection.value];
    ...
}

answered Feb 18, 2019 at 13:06

Johan Malan

2012 silver badges4 bronze badges

Collectives™ on Stack Overflow

React-Select custom options array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related