React, can't select the first option of <select>
<p>I render a <code>&lt;select&gt;</code> box in react from an array. My array looks like this:</p>

<pre><code>options: [
    {"id":1,"name":"Option1"},
    {"id":2,"name":"Option2"},
    {"id":3,"name":"Option3"}
    ];
</code></pre>

<p>I <code>map</code> the array and find all the options, then I render the options inside the <code>map</code>. However I'm able to select whatever option from the select, except the first one.</p>

<p>Here's my select:</p>

<pre><code>&lt;select
    className="form-control"
    name={this.props.name}
    onChange={this.handleChange.bind(this)}&gt;
    {(Array.isArray(this.props.options) &amp;&amp; this.props.options.length &gt; 0) ? this.props.options.map(option =&gt; {
        return (
            &lt;option key={option.id} value={option.id}&gt;{option.name}&lt;/option&gt;
        )
    }) : (&lt;option&gt;No Options Found&lt;/option&gt;)}
&lt;/select&gt;
</code></pre>

<p>How do I do it, to be able to select the first option as well? What am I doing wrong?</p>