How to use a array of strings as a options in the react-select

Question

I am new to react. I am using react select for the select. Now, I have the following jsx

div className="col-md-4 d-flex align-items-center" style={borderClass}>
                <label className="mb-0 font-weight-bold" style={labelFont}>
                  Technology
                                </label>
                <Select
                  styles={styles}
                  options={this.props.technology}
                  placeholder="None Selected"
                />
              </div>


const mapStateToProps = (state) => {
  return {
    technology : state.CreateJob.technology,
    userCompany: state.CreateJob.userCompany
  }
}

this is coming from the reducer as a prop. Now, the data I am getting is like ,

['a', 'b', 'c']

So, How can I use this as a option in the render . Can any one help me with this ? Thanks.

Oussail · Accepted Answer · 2019-02-04 11:50:17Z

12

You can render a list like this :

var array1 = ['a', 'b', 'c'];
var technologyList = [];
array1.forEach(function(element) {
    technologyList.push({ label:element, value: element })
});

And use it:

<Select options={ technologyList } />

edited Feb 4, 2019 at 11:50

answered Feb 4, 2019 at 11:41

Oussail

2,30813 silver badges24 bronze badges

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

2 Comments

ganesh kaspate Over a year ago

What if I have a single string value like "abcd" and I want it be autoselect with this value

Oussail Over a year ago

You will find what you need in this link : appdividend.com/2018/10/19/…

sridhar.. · Accepted Answer · 2020-07-02 06:15:31Z

3

<Select 
options={options} 
getOptionLabel={option => option} 
getOptionValue={option => option}
/>

answered Jul 2, 2020 at 6:15

sridhar..

2,13316 silver badges21 bronze badges

2 Comments

Alon Burg Over a year ago

Doesn't seem to be supported github.com/JedWatson/react-select/issues/…

user1264429 Over a year ago

It doesn't support using array of strings like this. You have to make it object which returns label and value.

aseferov · Accepted Answer · 2019-02-04 11:46:15Z

1

React select expect options props as array of object with property value and label

 <Select
   styles={styles}
   options={this.props.technology.map(t=>({value: t, label: t}))}
   placeholder="None Selected"
 />

answered Feb 4, 2019 at 11:46

aseferov

6,4233 gold badges20 silver badges24 bronze badges

3 Comments

ganesh kaspate Over a year ago

I have used this sol. but it haS 2200 items. so this thing is getting hanged

ganesh kaspate Over a year ago

If I have a single string and I want it be autoselect then what is the way to do ut

ganesh kaspate Over a year ago

Hi @aseferov could you please look stackoverflow.com/questions/55057517/…

Vaibhav Vishal · Accepted Answer · 2019-02-04 13:11:08Z

1

React-Select expects an array of objects for options with this format:

[..., { value: 'optionValue', label: 'optionLabel' }, ...]

The label property is displayed to the user and value will be sent to server on form submit.

You so you need to create an array in the given format from the array received from redux store.

...
render(){
    const { technology } = this.props;
    const rsOptions = technology.map(x => {label: x, value: x});
    return (
        <div className="col-md-4 d-flex align-items-center" style={borderClass}>
            <label className="mb-0 font-weight-bold" style={labelFont}>Technology</label>
                <Select
                    styles={styles}
                    options={rsOptions}
                    defaultValue={{label: 'abcd', value: 'abcd'}}
                    // value={{label: 'abcd', value: 'abcd'}}  // use value instead of defaultValue if its an controlled input
                    // you can also use an object from your array by index
                    // defaultValue={rsOptions[0]}
                    // or you can use find in your array
                    // defaultValue={rsOptions.find(x => x.value === 'abcd)}
                    placeholder="None Selected"
                />
          </div>
    );
}
...

answered Feb 4, 2019 at 13:11

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

1 Comment

ganesh kaspate Over a year ago

could you please look at stackoverflow.com/questions/55057517/…

Enrikisimo Lopez Ramos · Accepted Answer · 2019-02-04 11:36:00Z

0

you need to use map to traverse the array and render a option for
render each piece of the array.

<select className="form-control" value={currentValue} onChange={onChange}>
            <option value="">
                Select one...
            </option>
            {array.map(text,i => (
                <option key={i} value={text}>
                    {text}
                </option>
            ))}
        </select>

answered Feb 4, 2019 at 11:36

Enrikisimo Lopez Ramos

3934 silver badges11 bronze badges

Comments

tolotra · Accepted Answer · 2019-02-04 11:47:10Z

0

You must re-map your array of string to an array of object, react-select accept this format for options prop.

[{ value: 'your value', label: 'your label' }]

<Select options={this.props.technology.map(t => ({ value: t, label: t})) } />

Checkout the official docs here!

answered Feb 4, 2019 at 11:47

tolotra

3,2701 gold badge13 silver badges19 bronze badges

Comments

David · Accepted Answer · 2024-04-25 13:09:13Z

0

In React, the most efficient way would be to use the useMemo hook to map over the array of strings.

const options = useMemo(() => {
    return stringArray.map((option) => ({
      value: option,
      label: option,
    }));
  }, []);

answered Apr 25, 2024 at 13:09

David

13310 bronze badges

Collectives™ on Stack Overflow

How to use a array of strings as a options in the react-select

7 Answers 7

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related