React

by mschock

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  margin-right: 5px;
}

React

class App extends React.Component {
  handleLogin(e) {
     const formData = new FormData(e.target)
     const user = {}

     e.preventDefault()

     for (let entry of formData.entries()) {
         user[entry[0]] = entry[1]
     }

     console.log(user)
  }
  
  render() {
        return (
          <form onSubmit={this.handleLogin}>
            <input type="text" name="email" placeholder="Email" />
            <input type="password" name="password" placeholder="Password" />
            <button type="submit">Login</button>
          </form>
        );
      }
}

ReactDOM.render(<App />, document.querySelector("#app"))