import React from 'react';

class LoginForm extends React.Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  handleSubmit(event) {
    event.preventDefault();
    const { username, password } = this.state;
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Username: </label>{/* 'for' is a reserved word in JS, so in JSX we have to use htmlFor */}
          <input name="username" type="text" onChange={this.handleChange} />
        <label htmlFor="password">Password: </label>
          <input name="password" type="password" onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}