title: React set default value for select
body: <p>This is my <strong>SearchForm.js</strong>  class, <code>period</code> is a select list</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import axios from 'axios';
  
  class SearchForm extends React.Component {
  
          constructor(props) {
              super(props)
  
              this.state = {
                  position: '',
                  area: '',
                  period: '',
                  experience: {
                      type: Array,
                      default: () =&gt; []
                  }
              }
              this.handlePeriodChange = this.handlePeriodChange.bind(this);
          }
  
  
          handlePeriodChange(e) {
              this.setState({
                  [e.target.name]: e.target.value
              });
          }      
  
          render() {
              return ( &lt;
                  form className = 'form search-form'
                  onSubmit = {
                      this.handleSubmit
                  } &gt;
                  &lt;
                  div className = "form-row" &gt;
  
                      &lt;
                      div className = "form-group col-md-2" &gt;
                      &lt;
                      label htmlFor = "period" &gt; Period *&lt; /label&gt; &lt;
                      select className = "form-control"
                      name = "period"
                      id = "period"
                      onChange = {
                          this.handlePeriodChange
                      }
                      value = {
                          this.state.period
                      } &gt;
                      &lt;
                      option value = "1" &gt; 1 &lt; /option&gt; &lt;
                      option value = "3" &gt; 3 &lt; /option&gt; &lt;
                      option value = "7" &gt; 7 &lt; /option&gt; &lt;
                      option value = "30" &gt; 30 &lt; /option&gt; &lt; /
                      select &gt; &lt;
                      /div&gt; &lt; /
                      div &gt;
  
  
                      &lt;
                      div className = "form-row" &gt;
                      &lt;
                      div className = "form-group col-md-12 pt-3" &gt;
                      &lt;
                      input id = 'form-button'
                      className = 'btn btn-primary'
                      type = 'submit'
                      placeholder = 'Send' / &gt;
                      &lt;
                      /div&gt; &lt; /
                      div &gt; &lt;
                      /form&gt;
                  )
              }
          }
  
          export {
              SearchForm
          }
  </code></pre>
  
  <p>How to set defult value for period <code>select</code> ?</p>