Is it possible to use Array as option in React select

Question

My input data is in Array format like ["A","B","C"] and i would like to display them as options in react-select.

    import React, { Component } from 'react';
import Select from 'react-select';

const test= ["a","b","c"]



class TestSelect extends React.Component {
  state = {
    multi: null,
  };

  handleChange = name => value => {
    this.setState({
      [name]: value,
    });
  };
  render() {
    return (
      <div className='dropdown' style={{ dispay: 'inline-block', width: 250, paddingLeft: 50, paddingTop: 50 }}>
        <Select
          options={test}
          value={this.state.multi}
          autosize={true}
          onChange={this.handleChange('multi')
          isMulti
          placeholder="Select Values"
        />

      </div >
    );
  }
}
export default TestSelect;

Is it possible to use the array as option or it is always should be a object?

Only receive object based on the documentation example. const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' } ]; — Vynart
– Vynart, Commented Dec 31, 2018 at 3:53

Laura · Accepted Answer · 2019-01-03 15:57:19Z

3

According to the documentation, the structure of the options must respect the following pattern [{label: 'your label', value: 'your value'}, ...]

You will need to convert your array like this:

const options = test.map(v => ({
  label: v,
  value: v
}));

and then pass this value as your options.

Here a live example of your code.

answered Jan 3, 2019 at 15:57

Laura

8,6704 gold badges45 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Is it possible to use Array as option in React select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related