Selected value not showing in the input field [Controlled component, single select]
See original GitHub issueSelected value does not show in the input field for a controlled react-select component with single select.
Version: 2.0.0-beta.6 Demo: https://codesandbox.io/s/ypwq481j7z
import React, { Component} from "react";
import Select from "react-select";
type State = {
selectedValue: string
};
export default class SingleSelect extends Component<*, State> {
state = {
selectedValue: ""
};
optionChanged = value => {
console.log(value);
this.setState({ selectedValue: value});
};
render() {
console.log(this.state.selectedValue);
return (
<div>
<Select
options={["abcd", "def", "ghi"]}
value={this.state.selectedValue}
onChange={this.optionChanged}
getOptionLabel={option => option}
getOptionValue={option => option}
/>
</div>
);
}
}
```
Issue Analytics
- State:
- Created 5 years ago
- Reactions:18
- Comments:31
Top Results From Across the Web
React-select does not show the selected value in the field
For any one who is facing problems with React-Select getting populated or React-select doesn't get selected value; try to give it a dynamic...
Read more >How to Get Selected Value from a Mapped Select Input in React
To select a default option in React, the selected attribute is used in the option element. In React, though, instead of using the...
Read more >How can I set the value of a select input in React?
You can convert this Select component into a controlled component by using value instead of defaultValue . For a more detailed explanation of ......
Read more >Controller | React Hook Form - Simple React forms validation
You need to either set defaultValue at the field-level or useForm 's defaultValues . undefined is not a valid value. If your form...
Read more ><select>: The HTML Select element - HTML - MDN Web Docs
If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
the solution:
same problem.