class Form extends React.Component { constructor(props) { super(props); this.state = { // follows the names of the input fields isGoing: true, numberOfGuests: 2, flavor: ['lime','coconut'], message: 'your comment...' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked :target.tagName === 'SELECT'? [target.value, ...this.state.flavor] :target.value; const name = target.name; console.log(name, value, target.tagName); this.setState({ [name]: value // ES6 computed property name syntax }); } handleSubmit(event) { alert('Your favorite flavor is: ' + this.state.flavor); event.preventDefault(); } render() { return (

Is going:

Number of guests:

Pick your favorite flavor: Grapefruit Lime Coconut Mango

Message: </label> <input type="submit" value="Submit" /> </form> ); }}ReactDOM.render(<Form />, document.querySelector('div'));