CODEWITHSUNDEEP
reactjsreact-select
user2545642
user2545642

Reputation: 345

React select to render values from array

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

Upvotes: 1

Views: 1878

Answers (1)

Chris
Chris

Reputation: 59491

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

Upvotes: 2

Related Questions