React handling value in select

by k3llydev

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class Example extends React.Component {
  state = {
  	value: "0"
  }
  handleNumber = (event) => {
    this.setState({
       value: event.target.value
    },()=>{
    	console.log(this.state.value)
    })
  }
  render() {
    return (
      <div>
        <p>choose Number</p>                                     
        <select value={this.state.value} onChange={this.handleNumber}>
          <option value="one">1</option>
          <option value="two">2</option>
          <option value="three">3</option>
          <option value="four">4</option>
        </select>
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.querySelector("#app"))