I have an issue using react-select. I use redux form and I've made my react-select component compatible with redux form. Here is the code:
const MySelect = props => (
<Select
{...props}
value={props.input.value}
onChange={value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
selectedValue={props.selectedValue}
/>
);
and here how I render it:
<div className="select-box__container">
<Field
id="side"
name="side"
component={SelectInput}
options={sideOptions}
clearable={false}
placeholder="Select Side"
selectedValue={label: 'Any', value: 'Any'}
/>
</div>
But the problem is that that my dropdown has not a default value as I wish. What I'm doing wrong? Any ideas?
This question is related to
reactjs
default-value
react-select
I guess you need something like this:
const MySelect = props => (
<Select
{...props}
value={props.options.filter(option => option.label === 'Some label')}
onChange={value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
/>
);
I was having a similar error. Make sure your options have a value attribute.
<option key={index} value={item}> {item} </option>
Then match the selects element value initially to the options value.
<select
value={this.value} />
You need to do deep search if you use groups in options:
options={[
{ value: 'all', label: 'All' },
{
label: 'Specific',
options: [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
],
},
]}
const deepSearch = (options, value, tempObj = {}) => {
if (options && value != null) {
options.find((node) => {
if (node.value === value) {
tempObj.found = node;
return node;
}
return deepSearch(node.options, value, tempObj);
});
if (tempObj.found) {
return tempObj.found;
}
}
return undefined;
};
I just went through this myself and chose to set the default value at the reducer INIT function.
If you bind your select with redux then best not 'de-bind' it with a select default value that doesn't represent the actual value, instead set the value when you initialize the object.
To auto-select the value of in select.
<div className="form-group">
<label htmlFor="contactmethod">Contact Method</label>
<select id="contactmethod" className="form-control" value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
<option value='Email'>URL</option>
<option value='Phone'>Phone</option>
<option value="SMS">SMS</option>
</select>
</div>
Use the value attribute in the select tag
value={this.state.contactmethod || ''}
the solution is working for me.
I used the defaultValue parameter, below is the code how I achieved a default value as well as update the default value when an option is selected from the drop-down.
<Select
name="form-dept-select"
options={depts}
defaultValue={{ label: "Select Dept", value: 0 }}
onChange={e => {
this.setState({
department: e.label,
deptId: e.value
});
}}
/>
Change the state of the default option value in this event handler function to null
Class MySelect extends React.Component
{
constructor()
{
super()
this.handleChange = this.handleChange.bind(this);
this.state = {
selectDefault: "Select An Option"
}
}
handleChange(event)
{
const selectedValue = event.target.value;
//do something with selectedValue
this.setState({
selectDefault: null
});
}
render()
{
return (
<select name="selectInput" id="selectInput" onChange={this.handleChange} value=
{this.selectedValue}>
{this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
{'map list or static list of options here'}
</select>
)
}
}
Use defaultInputValue props like so:
<Select
name="name"
isClearable
onChange={handleChanges}
options={colourOptions}
isSearchable="true"
placeholder="Brand Name"
defaultInputValue="defaultInputValue"
/>
for more reference https://www.npmjs.com/package/react-select
Extending on @isaac-pak's answer, if you want to pass the default value to your component in a prop, you can save it in state in the componentDidMount() lifecycle method to ensure the default is selected the first time.
Note, I've updated the following code to make it more complete and to use an empty string as the initial value per the comment.
export default class MySelect extends Component {
constructor(props) {
super(props);
this.state = {
selectedValue: '',
};
this.handleChange = this.handleChange.bind(this);
this.options = [
{value: 'foo', label: 'Foo'},
{value: 'bar', label: 'Bar'},
{value: 'baz', label: 'Baz'}
];
}
componentDidMount() {
this.setState({
selectedValue: this.props.defaultValue,
})
}
handleChange(selectedOption) {
this.setState({selectedValue: selectedOption.target.value});
}
render() {
return (
<Select
value={this.options.filter(({value}) => value === this.state.selectedValue)}
onChange={this.handleChange}
options={this.options}
/>
)
}
}
MySelect.propTypes = {
defaultValue: PropTypes.string.isRequired
};
If you are not using redux-form and you are using local state for changes then your react-select component might look like this:
class MySelect extends Component {
constructor() {
super()
}
state = {
selectedValue: 'default' // your default value goes here
}
render() {
<Select
...
value={this.state.selectedValue}
...
/>
)}
If your options are like this
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
Your {props.input.value}
should match one of the 'value'
in your {props.options}
Meaning, props.input.value
should be either 'one'
or 'two'
I'm using frequently something like this.
Default value from props in this example
if(Defaultvalue ===item.value) {
return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>
} else {
return <option key={item.key} value={item.value}>{plantel.value} </option>
}
If you've come here for react-select v2, and still having trouble - version 2 now only accepts an object as value
, defaultValue
, etc.
That is, try using value={{value: 'one', label: 'One'}}
, instead of just value={'one'}
.
Source: Stackoverflow.com