How to use react-select with api

Question

I use react-select as a dropdown for autosearch import the library and render component:

<Select
              className='search-line'
              placeholder='Search...'
              options={dataList}
              onChange={opt => console.log(opt)}
                 />

The problem is that options is data that comes from API as an array of objects :

const data = [
  { id: 1,
    name: 'Bmw'
  },
  { id: 2,
    name: 'Ferrary'
      }
]

but to render options react-select requires objs with such key-val as

const options = [
    { value: name, label: name}
]

How to loop through my array and change that value and label obj key-val ?

This works but it splits all the names I have in array of objects I fetch from API:

   const name  = data.map(i => {
     return i.name
   })

  const dataList = [
    { label: name, label: name}
  ]

Data - is a prop with data (array of objects fetched from API)

There is an easy way without changing the original data format. You can use getOptionLabel and getOptionValue props on React-Select. See this answer — Ajeet Shah
– Ajeet Shah, Commented Mar 27, 2021 at 8:01

srosser2 · Accepted Answer · 2021-03-26 17:23:30Z

2

You can use

const options = data.map(item => {
    return {
        label: item.name,
        value: item.id     
    }
}

console.log(options) // [{ label: 'Bmw', value: 1}, { label: 'Ferrary', value: 2 }]


<Select
              className='search-line'
              placeholder='Search...'
              options={options}
              onChange={opt => console.log(opt)}
                 />

answered Mar 26, 2021 at 17:23

srosser2

1115 bronze badges

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

Collectives™ on Stack Overflow

How to use react-select with api

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related