PureDevOps Community

Cannot use 'in' operator to search for 'options' in ( Reactjs | Typescript)

#1

I have an array of Locations consisting data in the form of array:

const locations = ['Mumbai', 'tuljapur', 'Bhagalpur', 'North East', 'Bongaigaon', 'South District', 'Pune', 'Cuttack', 'amritsar', 'East Godavari', 'Chandigarh']

When I am passing this array to react-select as a options prop. It is giving the following error:

ScrollManager.tsx:48 Uncaught TypeError: Cannot use 'in' operator to search for 'options' in Mumbai
    at ScrollManager.tsx:48:1
    at Array.map (<anonymous>)
    at buildCategorizedOptions (ScrollManager.tsx:48:1)
    at Select._this.buildCategorizedOptions (ScrollManager.tsx:48:1)
    at Select._this.buildFocusableOptions (ScrollManager.tsx:48:1)
    at Select.openMenu (ScrollManager.tsx:48:1)
    at Select._this.onInputFocus (ScrollManager.tsx:48:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)

Here’s the React Select Component:

 <Select
                className="ml-4 mb-4 w-[180px]"
                placeholder="School Name"
                // isClearable={true}
                options={locations}
                name={"class"}
                // value={selectedFilters.status}
              />

How can I send my array as options in react-select

#2

React Select expects the options to be passed as array of object in this format:

{ value: 'value here', label: 'Label here' }

So, you should be passing locations as an array of objects to options prop of React-Select select as:

[
  {  label: "Mumbai", value: "Mumbai" },
  {  label: "tuljapur", value: "tuljapur" },
  ....
]

Code Sandbox link codesandboxer-example - CodeSandbox