I am currently attempting to implement react-select into a web-app I am developing, but whenever it is rendered it crashes the entire react application with minified error #130 - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
The code which procedurally generates these select elements looks as such
let optionObjects = await retrievePropertyOptions(null, null, null, property, true)
let options = this.listOptionConstructor(optionObjects, true)
//options returns an array of objects with value and label properties
let selector =
<React.Fragment key={number}>
<label className="cssclasses"
for={`select-custom-${name}`}>
{name}</label>
<ReactSelect options={options} onChange={(selected) => {
this.setState({
[`multi-selector${number}`]: selected
})}}
value = {this.state[`multi-selector${number}`]}
/>
</React.Fragment>
And my import is simply const ReactSelect = require('react-select')
Does anyone know why I am running into this error? It works perfectly with everything besides the react-select component so I am very confused what I may have done wrong. I tried the import as a de-structured object as well just in case and still ran into the same issue. When I console.log out selector, I get an object that looks identical to any other react fragment object, and I am bundling my files using webpack which I believe is correctly configured as it builds and works perfectly besides this one issue. Any suggestions are appreciated.
edit: Created a codepen to showcase the issue (https://codepen.io/AugustTGuenther/pen/abmJEpx), getting a different error here and slightly more description from the react error but still does not want to render even with static mock data as the options. I imagine if someone could point out what I am doing wrong there it would be the same issue in my actual code - matched react versions and react-select versions to the actual code as well.
You could try this code snippet where the data fetching is done in an useEffect and then the value is set to state and passed in options of the react-select. It should mostly be an issue with the options that is been created. It would also be nice if you could move the data fetching logic the useEffect hook.
import * as React from 'react';
import ReactSelect from 'react-select';
// mockData is just a mock.It should be coming from the server.
const mockData = [
{ value: 'some value', label: 'some label 1 ' },
{ value: 'some value', label: 'some label 2' },
{ value: 'some value', label: 'some label 3' },
];
export default function App() {
const [response, setResponse] = React.useState([]);
const retrievePropertyOptions = () => {
return new Promise((resolve) => {
resolve(mockData);
});
};
React.useEffect(() => {
async function getProperties() {
const result = (await retrievePropertyOptions()) as any;
setResponse(result);
}
getProperties();
}, []);
return (
<div>
<ReactSelect options={response} />
</div>
);
}