如何在 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.

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

Answer 2

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

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

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

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 !

Answer 6

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>