React、最初のオプションを選択できません<select>

Question

<select>ボックスを反応させて配列から描画します。私はその後、私はmap内部のオプションをレンダリングし、配列をmapし、すべてのオプションを見つける

options: [ 
    {"id":1,"name":"Option1"}, 
    {"id":2,"name":"Option2"}, 
    {"id":3,"name":"Option3"} 
    ]; 

：私の配列はこのようになります。しかし、私は最初のものを除いて、選択肢から任意のオプションを選択することができます。ここで

は私の選択です：

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

は、私も最初のオプションを選択できるようにするには、それをどのように行うのですか？私は間違って何をしていますか？

Answer 1

デフォルトでは、最初のオプションが選択されています。必要に応じて空のオプションを作成し、その後で最初のオプションを選択することができます。

render() { 
    const options = this.props.options.map(option => 
     <option key={option.id} value={option.id}>{option.name}</option> 
    ) 

    return (
     <select 
     className="form-control" 
     name={this.props.name} 
     onChange={this.handleChange.bind(this)} 
     > 
     <option value="">Select option</option> 
     {options} 
     </select> 
    ) 
    }