How to get values from select react js - reactjs

Question

class button extends Component {
constructor(props) {
super(props);
this.state = {
role: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ [event.target.id]: event.target.value });
}
handleSubmit(event) {
console.log(this.state.role);
event.preventDefault();
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
<select value={this.state.role} onChange={this.handleChange}>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</label>
<input type="submit" value="a" />
</form>
</div>
);
}
}
If I were to go to the scroll bar and click either A or B it should console log A or B but it gives empty. Why? At the moment I can't scroll the bar either. I tried using name, id as this.state.role those didn't work either

Answer 1

You are using the event.target.id in your handleChange method, but your select has no id property (btw, property "name" will be better suited than "id" for this). Also, you should define an initial role value (as your select is set to A, by default);
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
role: 'A'
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit(event) {
console.log(this.state.role);
event.preventDefault();
}
render() {
return (<div>
<form onSubmit={this.handleSubmit}>
<label>
<select id="role" value={this.state.role} onChange={this.handleChange}>
<option value="A">A</option>
<option value="B">B</option>
</select>
</label>
<input type="submit" value="a"/>
</form>
</div>);
}
}
ReactDOM.render(< Button / >, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

Try code below
class button extends Component {
constructor(props) {
super(props);
this.state = {
role: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
handleSubmit(event) {
console.log(this.state.role);
event.preventDefault();
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
<select name="role" value={this.state.role} onChange={this.handleChange}>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</label>
<input type="submit" value="a" />
</form>
</div>
);
}
}
Also, check the documentation on controlled components and how to handle forms in react https://reactjs.org/docs/forms.html

Answer 3

If i understood you correctly this is the solution to your problem:
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
role: 'A'
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
console.log('####onChange Value: ', event.target.value)
this.setState({ role: event.target.value });
}
handleSubmit(event) {
console.log('submited value: ',this.state.role);
event.preventDefault();
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
<select value={this.state.role} onChange={this.handleChange}>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</label>
<input type="submit" value={this.state.role} />
</form>
</div>
);
}
}