title: How to set the value of a select dropdown in javascript dynamically in reactjs
body: <p>I have a select tag which looks like this:</p>
  
  <pre><code>    &lt;select id="bookName"
       onChange={(event) =&gt; this.props.handleShelfChange(this.props.book, event.target.value)}&gt;
          &lt;option value="moveTo" disabled&gt;Move to...&lt;/option&gt;
          &lt;option value="currentlyReading"&gt;Currently Reading&lt;/option&gt;
          &lt;option value="wantToRead"&gt;Want to Read&lt;/option&gt;
          &lt;option value="read"&gt;Read&lt;/option&gt;
          &lt;option value="none"&gt;None&lt;/option&gt;
     &lt;/select&gt;
  </code></pre>
  
  <p>So,here I am receiving props from another component. So, one of the prop is <code>{this.props.book.shelf}</code> .This prop has 4 values : </p>
  
  <ol>
  <li>currentlyReading,   </li>
  <li>wantToRead,   </li>
  <li>read and   </li>
  <li>none.</li>
  </ol>
  
  <p>So, what I want is according to the value that is coming through the props from the parent component, the value of the select option should be selected by default. How can this be done? </p>