CODEWITHSUNDEEP
reactjsreact-select
Sanjay Kapilesh
Sanjay Kapilesh

Reputation: 399

React-Select on selecting a value the dropdown options unavailable

Process the prop from another component to match in the react-select options

const labelOptionsProcessed = []
    labelOptions.map(item => {
        let tmpObj = {
            id: item.id,
            label: item.name,
            name: item.name
        }
        labelOptionsProcessed.push(tmpObj)
    })

tmpObj is the structure of the options

<Select
      options={labelOptionsProcessed}
       isMulti
 ></Select>

When a select a dropdown value , the options change to no data available

Before selecting an Option :

enter image description here

After Selecting an Option:

enter image description here

StackBlitz: https://stackblitz.com/edit/react-4ddnq7

Upvotes: 0

Views: 923

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

You have to set a value property for options instead of id

EX:

const labelOptionsProcessed = []
labelOptions.map(item => {
    let tmpObj = {
        value: item.id, // here
        label: item.name,
        name: item.name
    }
    labelOptionsProcessed.push(tmpObj)
});

I guess this is not the proper way to generate the options list, I'd do something like this

const labelOptionsProcessed = labelOptions.map(({ value, name: label, name }) => {
  return {
    value,
    label,
    name
  };
});

Upvotes: 2

Related Questions