title: React-Select trigger selection of option
body: <p>I have a react component with a <code>&lt;Select options={myoptions} onChange={this.mychangehandler}/&gt;</code> element from react-select. I have saved some settings using redux that can be accessed e.g. using <code>this.props.myreducer.dropdownvalue</code>(already tested, the values are available when first rendering the component)</p>
  
  <p>Depending on the redux props I want to automatically select one of the options in the dropdown. How can I tell the <code>&lt;Select.../&gt;</code>dropdown to automatically select option 2 if <code>this.props.myreducer.dropdownvalue</code> is equal to 1?</p>
  
  <p>There are countless properties but somehow I found no one that can help me automatically select the proper entry.</p>
  
  <p>Any ideas? Solutions that will automatically trigger onChange as well prefered, but should be no problem if not.</p>
  
  <p>Thanks in advance :)</p>
  
  <p>Regards Christian</p>
  
  <p>edit: Here is the full code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import { connect } from 'react-redux';
  import Auxiliary from '../../../../../../../hoc/Auxiliary/Auxiliary';
  import classes from './Dropdown.module.css';
  import Select from 'react-select';
  
  class Dropdown extends Component {
  
  changeSetting = (event) =&gt; {
      console.log('qid'+this.props.qid)
      console.log('event: '+JSON.stringify(event))
      if(this.props.certs.certquestions[this.props.qid].red === event.id)
      {
          this.props.colorchanger("red")
      }else if(this.props.certs.certquestions[this.props.qid].yellow === event.id)
      {
          this.props.colorchanger("yellow")
      }else if(this.props.certs.certquestions[this.props.qid].green === event.id)
      {
          this.props.colorchanger("green")
      }
  }
  render(){
      const options = []
      const qid = this.props.qid
      console.log('qid:'+qid)
      const question = this.props.certs.certquestions[qid]
      const opt = question.options.split("|")
      for(let i = 0;i&lt;opt.length;i++){
          let optname = opt[i]
          options.push({value:i, label:optname, id:i})
      }
      let notes = "";
      let selectedOption = null;
      if(this.props.loadp)
      {
          let progress = this.props.certs.loadedProgress[this.props.users.users[this.props.users.currentuser].target_id+'_'+this.props.q]
          if (typeof progress !== 'undefined')
          {
              notes = progress.notes
              selectedOption = progress.selectedOption
          }
      }
  return(
      &lt;Auxiliary&gt;
          &lt;h3&gt;{question.title}&lt;/h3&gt;
      &lt;Select className = {classes.Dropdown} options={options} onChange={this.changeSetting}/ value={selectedOption}&gt; //selectedOption is an Integer
      &lt;textarea value = {notes}/&gt;
  &lt;/Auxiliary&gt;
  )
  }
  }
  const mapStateToProps = state =&gt; {
  return {
      certs: state.certs,
      users: state.users
  };
  }
  export default connect(mapStateToProps, null)(Dropdown);
  </code></pre>
  
  <p>the options have different labels and value and id from 0 to 9. I tried to add <code>value={selectedOption}</code> to the Select element, also tried it with the label instead, but it always only shows the "Select..." placeholder and doesn't select the option and trigger the onChange. Any idea what I'm doing wrong?</p>
  
  <p>Solved: I now know what I did wrong, thanks a lot :) I needed to pass an object with value, id and label to value :)</p>