Multiple Form Inputs

Must use name prop and make sure that the name prop matches the what we're putting in state.

class Form extends React.Component {
  constructor(props) {
    super(props) 
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  
  handleSubmit(e) {
    e.preventDefault();
    alert('you typed `${this.state.username}`);
    this.setState({ username: ''});
  }

  render() {
    return (
      <div>
        <h1>Form Demo</h1>
        <form onSubmit={this.handleSubmit}>
          <input 
            type='text'
            name='username
            value={this.state.username} 
            onChange={this.handleChange}> />
          <input 
            type='email'
            name='email
            value={this.state.email} 
            onChange={this.handleChange}> />
          <input 
            type='password'
            name='password'
            value={this.state.password} 
            onChange={this.handleChange}> />
        </form>
      </div>
    );
  }
}

export default Form;