title: React-Select dropdown not functioning correctly with value
body: <p>I'm using <a href="https://github.com/JedWatson/react-select" rel="nofollow noreferrer">React-Select</a> in my application to create a dropdown and update some text boxes. Here's the very simplified code, which should get the point and problem (which I cannot find?) across. </p>
  
  <pre><code>import Select from 'react-select';
  // other imports - react, bootstrap, ...
  
  class UpdateMe extends Component {
  
  constructor(props) {
       this.state = {
            options: [ 
               {label: 'hello', value: 'greeting'},
               {label: 'goodbye', value: 'farewell'} ],
            selectedOpt: '',
            textOne: '', 
       // other stuff in here not relevant, I believe, to problem
       }
  }
  
  handleDropdown(event) {
       this.clearBoxes();
       this.setState({
            selectedOpt: event.value,
            textOne: event.label
       });
  } 
  
  
  // in my render method in all the div's and stuff
  &lt;Select isClearable={false} className="dropdown-me"
   value={this.state.selectedOpt}
   options={this.state.options}
   onChange={this.handleDropdown.bind(this)} /&gt;
  </code></pre>
  
  <p>So this is a simplified re-write of my code. Basically what's happening is that when I click the dropdown, it <strong>does not</strong>:</p>
  
  <ol>
  <li>Highlight the option when the dropdown is displayed</li>
  <li>Display the name of the option on click</li>
  </ol>
  
  <p>I would appreciate it if anyone could help me debug this issue! Thanks</p>