ReactJS: Drop Down Submit Form

This entry is part 5 of 35 in the series React JS

class FlavorForm extends React.Component {
  constructor(props) {
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  handleChange(event) {

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
        <input type="submit" value="Submit" />

  <FlavorForm />,

React For Beginners by Wes Bos

premium step-by-step training course to get you building real world React.js + Firebase apps and website components.

Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He works as an independent web developer and teaches as a lead instructor with HackerYou and Ladies Learning Code. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world.