I am using AsyncCreatableSelect
of react-select 2.0 to fetch the options from an API, but I am facing the following error as soon as I type something -
Creatable.js:126 Uncaught TypeError: selectOptions.some is not a function
at isValidNewOption (Creatable.js:126)
at Creatable.componentWillReceiveProps (Creatable.js:212)
at callComponentWillReceiveProps (react-dom.development.js:13047)
at updateClassInstance (react-dom.development.js:13260)
at updateClassComponent (react-dom.development.js:14860)
at beginWork (react-dom.development.js:15716)
at performUnitOfWork (react-dom.development.js:18750)
at workLoop (react-dom.development.js:18791)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:17998)
at renderRoot (react-dom.development.js:18909)
at performWorkOnRoot (react-dom.development.js:19812)
at performWork (react-dom.development.js:19722)
at performSyncWork (react-dom.development.js:19696)
at requestWork (react-dom.development.js:19551)
at scheduleWork (react-dom.development.js:19358)
at Object.enqueueSetState (react-dom.development.js:12789)
at Async.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:354)
at Async.js:168
This is what my component looks like -
<AsyncCreatableSelect
name="search"
value={this.state.search}
styles={customStyles}
placeholder={this.props.position+". Add Skill"}
loadOptions={this.getOptions}
onChange={this.updateValue}
/>
and this is the function I am calling for loadOptions -
getOptions(searchTerm){
return fetch(`https://api.stackexchange.com/2.2/tags?order=desc&sort=popular&inname=${searchTerm}&filter=default&site=stackoverflow`)
.then(results=>{
return results.json();
}).then(data=>{
let options=[]
for(let i in data.items){
options.push({
value:data.items[i].name,
label:data.items[i].name[0].toUpperCase()+data.items[i].name.substring(1).split('-').join(' ')
})
}
//console.log(options)
return {'options':options.slice(0,7)}
})
}
I answered in the git repo as well, but will follow up here as well in case it helps anyone else.
loadOptions is a function that passes two parameters: inputValue and callback. You need the second one to resolve the promise.
getOptions(searchTerm, callback){
...
//console.log(options)
callback(options.slice(0, 7));
})
}
Please let me know if this helps.