I have a simple React component which gets an initial state:
this.state = {
currentObject: {
isYounger: false
}
}
I then render a react-select with the default value of this.state.currentObject.isYounger:
<Select
name={"age"}
value={this.state.currentObject.isYounger}
onChange={newValue => this.addIsYoungerValue(newValue)}
options={isYoungerOptions}
/>
For some reason, the value is not set. Why is this?
Version:
"react-select": "^2.4.2",
Here the issue is not with state selection, the actual issue is that the label is not getting displayed.
So, as per your addIsYoungerValue function you are setting the value of this.state.currentObject.isYounger to whole object. i.e. { value: true, label: "Younger" }. So, the issue can be solved by changing the value of initial state by below.
this.state = {
array: [],
currentObject: {
isYounger: { value: true, label: "Younger" }
}
};
And hurrey, the default value label will be shown..
There is an alternate way to use value as your defaultValue. In my case I have used "id" and "industry" instead of "label" and "value"
this.state = {
interested_industries: [{id:"ANY", industry:"ANY"}]
}
And in Select component:-
<Select
name="interested_industries"
options={industries}
value={interested_industries}
getOptionLabel={ x => x.id}
getOptionValue={ x => x.industry}
onChange={this.handleSelect}
isMulti
/>
Your defaultValue or value must be objects. In your case like this:
defaultValue={isYoungerOptions[0]}
or
this.state = {
array: [],
currentObject: {
isYounger: { value: "true", label: "Younger" }
}
};
Here an live example.
Your defaultValue or value must be objectsThe defaultValue prop only works on mount / first render of the component
I hope this can help you
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' }
];
const [selectedItem, setSelectedItem] = useState({ label: '', value: '' });
<Select
className='w-full'
isClearable
value={selectedItem}
options={options}
onChange={selected => {
if (selected && selected.value) {
const selectedItem = options.filter(option => option.value === selected.value)[0];
setSelectedItem(selectedItem);
} else {
setSelectedItem({ label: '', value: '' });
}
}}
/>
Booleanvalue. Can you try it once with String value, so that we can understand the root cause and it will help to resolve the issue. @A7DCdefaultValueprop. As described here. https://github.com/JedWatson/react-select