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>

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>

• javascript
• html
• reactjs

• This is extremely vague. Please try providing more context. – Arnav Aggarwal Commented Jun 6, 2017 at 18:47
• This is already answered on different thread. Please look into stackoverflow./questions/29108779/… – sridhar Commented Jun 6, 2017 at 18:51
• Possible duplicate of How to get selected value of a dropdown menu in ReactJS – GrumpyCrouton Commented Jun 6, 2017 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 Commented Jun 6, 2017 at 20:03

2 Answers 2

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

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>