첫 번째 옵션을 선택할 수 없습니다. <select>

Question

배열의 반응 상자에 <select> 상자를 렌더링합니다. 내 배열은 다음과 같습니다

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

그때 나는 map 내부의 옵션을 렌더링, 배열을 map 모든 옵션을 찾을 수 있습니다. 그러나 나는 첫 번째 것을 제외하고 선택에서 어떤 옵션을 선택할 수 있습니다.

은 여기 내 선택 :

<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> 
    ) 
    }