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
CodePudding user response:
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" },
....
]
Reference: https://react-select.com/home#getting-started
Code Sandbox link https://codesandbox.io/s/pb4r2s?module=/example.tsx