Form -- Select

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class FlavorForm extends React.Component{
	constructor(props){
  	super(props);
    this.state = {value: 'coconut'};
  }
  
  handleChange = event => {
  	this.setState({value: event.target.value});
  }
  handleSubmit = event => {
  	event.preventDefault();
    alert('Your favorite flavor is ' + this.state.value);
  }
  
  render(){
  	return (
    	<form onSubmit={this.handleSubmit}>
    	  <label>
    	    Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value='grape'>Grape</option>
            <option value='lime'>Lime</option>
            <option value='coconut'>Coconut</option>
            <option value='mango'>Mango</option>
          </select>
    	  </label>
        <input type='submit' value='Submit' />
    	</form>
    )
  }
}

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