ReactJS: [Forms] Getting displayed value of select tag React

Start project

Getting displayed value of select tag

ReatcJS 2018

class FormComponent extends React.Component {
  constructor(props){
      super(props);
      this.state = {color: 'ping'};
  }
  handleChange = (event) => {
    this.setState({color: event.target.value})
  }
  handleSubmit = (event) => {
    alert("This is "+this.state.color+" color");
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit} className="mt-3 ml-3 form-row">
        <select value={this.state.color} onChange={this.handleChange} className="form-control col-4 col-sm-4 col-md-3 col-lg-2">
          <option value="red">red</option>
          <option value="green">green</option>
          <option selected value="ping">ping</option>
          <option value="ogran">ogran</option>
        </select>
        <button type="submit" className="btn btn-warning ml-2">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FormComponent/ >
  ,document.getElementById('root'));