Tengo un dropdown sencillo en react. Mi state se ve de la siguiente manera:
this.state = {
opciones: [
{"id": 1, "descripcion": "Opcion 1"}
, {"id": 2, "descripcion": "Opcion 2"}
, {"id": 3, "descripcion": "Opcion 3"}
, {"id": 4, "descripcion": "Opcion 4"}
, {"id": 5, "descripcion": "Opcion 5"}
, {"id": 6, "descripcion": "Opcion 6"}
],
dropdown:null
}
Y tengo un dropdown que se ve de esta manera:
<div>
<label htmlFor="dropdown">Drop Down</label>
<select id="dropdown" name="dropdown" onChange={this.handleOptionChange} value={this.state.dropdown}>
{this.state.opciones.map(opt => {
return <option value={opt.id}>{opt.descripcion}</option>
})}
</select>
</div>
Y tengo el siguiente handle:
handleOptionChange(e) {
let target = e.target;
this.setState({[target.name] : target.value}, console.log(this.state.dropdown));
}
Pero a la hora de cambiar la opcion me cambia el id que estoy mandando pero tambien afecta al origen de datos (el arreglo opciones) el resultado es este:
<select id="dropdown" name="dropdown">
<option value="4">opcion 1</option>
<option value="2">opcion 2</option>
<option value="3">opcion 3</option>
<option value="4">opcion 4</option>
<option value="5">opcion 5</option>
<option value="6">opcion 6</option>
</select>
No sé si estoy haciendo algo mal. Gracias de antemano