question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Selected value not showing in the input field [Controlled component, single select]

See original GitHub issue

Selected 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:closed
  • Created 5 years ago
  • Reactions:18
  • Comments:31

github_iconTop GitHub Comments

45reactions
mattyx96commented, Jan 29, 2019

the solution:

               <Select
                    styles={selectStyles}
                    value={{label : this.state.string}}
                    onChange={(e) => this.handleChange(e)}
                    options={this.state.options}
                />
43reactions
JanBNcommented, Jun 10, 2018

same problem.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found