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.

Smelt

Answer 1

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 } />

Pusillanimous

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

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

Answer 2

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

Cry

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

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

Answer 3

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"
 />

Linguini

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

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

Hi @Linguini could you please look #55058017 – Smelt

Answer 4

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>
    );
}
...

Foible

could you please look at #55058017 – Smelt

Answer 5

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!

Edwin

Answer 6

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,
    }));
  }, []);

Austinaustina

Answer 7

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>

Trochophore