change selected value dropdown reactjs

Question

I'm using a dropdown box with ReactJS and I'm using the default values that I get from "this.state.whoIsChecked.allowDestroyAll". But when I use it as default value, I can't change the value anymore. Here follows the code I'm using:

<select 
className="form-control" 
id="ada" 
value={this.state.whoIsChecked.allowDestroyAll}>
    <option>true</option>
    <option>false</option>
</select>

This is already answered on different thread. Please look into https://stackoverflow.com/questions/29108779/how-to-get-selected-value-of-a-dropdown-menu-in-reactjs — sridhar, Jun 06 '17 at 18:51
Possible duplicate of [How to get selected value of a dropdown menu in ReactJS](https://stackoverflow.com/questions/29108779/how-to-get-selected-value-of-a-dropdown-menu-in-reactjs) — GrumpyCrouton, Jun 06 '17 at 20:02
Please check out the seemingly duplicate question above, if you believe this is not a duplicate then add more detail to your post outlining your problem and what you have tried that has not worked. — GrumpyCrouton, Jun 06 '17 at 20:03

Shubham Khatri · Answer 1 · 2017-06-06T19:00:17.360

You need to add an onChange event with the controlled input and update the state in order to change the value after providing a value to Option field like

handleChange(e) {
     var whoIsChecked = {...this.state.whoIsChecked}
     whoIsChecked.allowDestroyAll = e.target.value
     this.setState({whoIsChecked})
}


render( ) {
 return <select 
    className="form-control" 
    id="ada" 
    onChange={(e) => this.handleChange(e)}
    value={this.state.whoIsChecked.allowDestroyAll}>
        <option value="true">true</option>
        <option value="false">false</option>
    </select>
}

class App extends React.Component {
state= {
    whoIsChecked: {
        allowDestroyAll: "true"
    }
}
handleChange(e) {
         var whoIsChecked = {...this.state.whoIsChecked}
         whoIsChecked.allowDestroyAll = e.target.value
         this.setState({whoIsChecked}, ()=> {console.log(this.state)})
         
    }
    

    render( ) {
     return <select 
        className="form-control" 
        id="ada" 
        onChange={(e) => this.handleChange(e)}
        value={this.state.whoIsChecked.allowDestroyAll}>
            <option value="true">true</option>
            <option value="false">false</option>
        </select>
    }
    
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Consider accepting and upvoting the answer if it helped – Shubham Khatri Jun 07 '17 at 18:08 — Shubham Khatri, Jun 07 '17 at 18:08

Mayank Shukla · Answer 2 · 2017-06-06T18:57:07.177

You are using the controlled element, using the value property (means controlling the value of selectfield by the state variable), you need to define the onchange method to update that state value otherwise selectfield will become read-only.

Write it like this:

<select 
    className="form-control" 
    id="ada" 
    value={this.state.whoIsChecked.allowDestroyAll}
    onChange={this.change}
>
    <option value='true'>true</option>
    <option value='false'>false</option>
</select>

change = (e) => {
    let whoIsChecked = Object.assign({}, this.state.whoIsChecked)
    whoIsChecked.allowDestroyAll = e.target.value;
    this.setState({whoIsChecked});
}

Note: You need to assign the unique value to each option.

change selected value dropdown reactjs

2 Answers2