How to add add key to react-select multi?

Question

How can I add key element to react-select with ismulti, so when I select multiple options it doesn't give me this error "Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version."

here is my code:

         let options = data.map( (item,index) => (
             { index: item.name, value: item, label: item.name })
             );
   
      setOptions(options);

in the return part here is how I'm setting the react-select

 <Select 
        
            value={selectedOptions || ''}       
            className="select-name"
            isMulti
            name="selectedOption"
            onChange={handleChange}
            isClearable             
            options={Options}              
        />

Thanks in advance for your help.

net.uk.sweet · Accepted Answer · 2021-06-02 11:26:52Z

2

There's a solution suggested on the discussion about the same issue on github.

Essentially you would add a toString method to the object used as the value in your options. This allows you to control the format of the key (which otherwise is generated by casting the value property to a string, hence the duplicated [object Object] keys.

In your case it might look something like this:

const options = data.map((item, index) => ({
  index: item.name,
  value: {
    ...item,
    toString: () => item.id // assumes item has a unique id property
  },
  label: item.name
}));

setOptions(options);

answered Jun 2, 2021 at 11:26

net.uk.sweet

12.4k3 gold badges26 silver badges42 bronze badges

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

Comments

Hugodby · Accepted Answer · 2023-06-15 08:43:30Z

1

You can use the getOptionValue prop from the Select component like so:

getOptionValue={({ value }) => value.name}

answered Jun 15, 2023 at 8:43

Hugodby

1,1839 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to add add key to react-select multi?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related