React select to render values from array

Question

Using https://github.com/JedWatson/react-select. I have an method that will loop through an array that I would like to input into the value for react-select picker. Any ideas why const value is invalid?

  renderList (thelist, i) {
    const { selectedOption } = this.state;

    console.log(thelist);

    // this throws me error
    const value = {
      value: {thelist.name},
      label: {thelist.name}
    }

   return (
    <div>
     <Select
       name="form-field-name"
       onChange={this.handleChange}
       value={value}
     />
   </div>
);

Chris · Accepted Answer · 2018-02-22 16:02:55Z

2

You don't need the curly braces for the object values. Just do:

const value = {
  value: thelist.name,
  label: thelist.name
}

You only use curly braces when declaring an object or when you need to tell React to interpret something inside render() as plain JavaScript instead of a string.

However, you probably want to define an options prop too to your select component. value only gives the dropdown a selected value, but options is what actually defines... well, the options. The options can be multiple, so we define them in an array of objects.

So do:

options={[
  {
    value: thelist.name1,
    label: thelist.name1
  },
  {
    value: thelist.name2,
    label: thelist.name2
  }
]}

edited Feb 22, 2018 at 16:02

answered Feb 22, 2018 at 15:47

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

3 Comments

Chris Over a year ago

@user2545642, no worries. Please consider marking it as accepted if it fully answered your question, when you can.

user2545642 Over a year ago

but hey follow up question if you dont mind. Any ideas of how to list all array items into one select list? This one would create multiple ones with only one item per list.

Chris Over a year ago

@user2545642 Like so? :)

Collectives™ on Stack Overflow

React select to render values from array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related