Reagieren, kann nicht die erste Option von <select>

Question

Ich render eine <select> Box in der Reaktion von einem Array. Mein Array sieht wie folgt aus:

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

ich das Array map und alle Optionen finden, dann machen ich die Optionen innerhalb des map. Ich kann jedoch jede Option aus der Auswahl auswählen, mit Ausnahme der ersten.

Hier ist meine select:

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

Wie mache ich es, in der Lage sein auch die erste Option wählen? Was mache ich falsch?

Answer 1

Ihre erste Option ist standardmäßig ausgewählt. Wenn Sie möchten - Sie können eine leere Option erstellen und danach die erste Option auswählen.

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