Generate options by mapping over array of objects with react-select

Question

I'm using react-select to create a Select option in my create-react-app and am trying to map over an array of objects to generate the options. My app loads fine but when I click on the Select I get this error: Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

I'm passing the data to the component via props which is working fine, and the data is structured like this:

const guests = [
    {
        name: 'Kait',
        plus: true,
        plusName: 'Kitty'
    },
    {
        name: 'Séanin',
        plus: true,
        plusName: 'Guest'
    }
]

And here's the Select component:

<Select
   value={selectedOption}
   onChange={this.handleChange}
   options={
      this.props.guests.map((guest, index) => {
         return {
            label: guest,
            value: guest,
            key: index
         }
      })
   }
/>

Any ideas on how I can fix this?

I guess the code looks fine. Are you sure you're not displaying guests array anywhere? — Chris Dąbrowski
– Chris Dąbrowski, Commented Mar 14, 2019 at 23:41

user6612182 · Accepted Answer · 2019-03-26 16:40:13Z

6

Sung M. Kim‘s answer is correct, but there is an easier way to use your attributes as label and value without remapping your options array.

Using the props getOptionLabel and getOptionValue you can keep your object mappings. Both accept a function that gets a single option as an argument and returns the value or label from the appropriate object property as string.

<Select
    options={this.props.guests}
    getOptionLabel={(option) => option.name}
    { /* Couldn't find a value in your structure, so I used name again */ }
    getOptionValue=((option) => option.name}
    { ... }
/>

See documentation for more.

answered Mar 26, 2019 at 16:40

user6612182

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

Comments

Yiyo · Accepted Answer · 2019-03-14 23:41:52Z

2

You probably will have to generate the array before rendering the component

const options = this.props.guests.map((guest, index) => {
     return {
        label: guest.name,
        value: guest,
        key: index
     }
})
<Select
   value={selectedOption}
   onChange={this.handleChange}
   options={options}
/>

Edit:

is because you are passing an object in the label field. You should pass a String instead

answered Mar 14, 2019 at 23:41

Yiyo

213 bronze badges

Comments

dance2die · Accepted Answer · 2019-03-15 00:09:54Z

1

The error occurs because the label is set as guest (an object) not as guest.name (a string).

Making following change will work.

<Select
   value={selectedOption}
   onChange={this.handleChange}
   options={
      this.props.guests.map((guest, index) => {
         return {
-            label: guest,
+            label: guest.name
            value: guest,
            key: index
         }
      })
   }
/>

You can try it out in the sandbox link below.

answered Mar 15, 2019 at 0:09

dance2die

37.2k39 gold badges137 silver badges199 bronze badges

Collectives™ on Stack Overflow

Generate options by mapping over array of objects with react-select

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related