CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxreact-select
ganesh kaspate
ganesh kaspate

Reputation: 2685

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

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.

Upvotes: 6

Views: 31639

Answers (7)

David
David

Reputation: 133

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

Upvotes: 0

sridhar..
sridhar..

Reputation: 2133

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

Upvotes: 3

Vaibhav Vishal
Vaibhav Vishal

Reputation: 7108

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

Upvotes: 1

Oussail
Oussail

Reputation: 2288

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

Upvotes: 12

tolotra
tolotra

Reputation: 3270

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!

Upvotes: 0

aseferov
aseferov

Reputation: 6393

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

Upvotes: 1

Enrikisimo Lopez Ramos
Enrikisimo Lopez Ramos

Reputation: 393

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>

Upvotes: 0

Related Questions