2 Basic React Forms Patterns

Sooner or later you will need to deal with forms in react! Let's have a look at how we can handle forms in React!👌

In this tutorial, we will cover the basic patterns of working with forms in React.

Class Component

Here is how you can deal with a basic form in React using a Class-Component. 👇

import React, { Component } from 'react';

export default class BasicLoginFormClass extends Component {

  state = {
    email: '',
    password: ''
  };

  handleEmailChange = event => {
    this.setState({ ...this.state, email: event.target.value });
  };

  handlePasswordChange = event => {
    this.setState({ ...this.state, password: event.target.value });
  };

  handleSubmit = event => {
    alert(
      `Credentials were submitted - Email:${this.state.email} Password:${this.state.password}`
    );
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* Add label to make sure the form is accessible */}
        <label htmlFor="email">Email:</label>
        <input
          name="email"
          type="email"
          {/* These are needed to have 2-way data binding! */}
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        <label htmlFor="password">Password:</label>
        <input
          name="password"
          type="password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <input type="submit" value="Submit My Secure Form" />
      </form>
    );
  }
}

The class-based component has been the most common pattern in React. but React Hooks happened and now we can do the same using Function Components.

Function Component

import React, { useState } from 'react';

const BasicLoginForm = () => {
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handlePasswordChange = event => {
    setPassword(event.target.value);
  };

  const handleEmailChange = event => {
    setEmail(event.target.value);
  };

  const handleSubmit = event => {
    alert(
      `Credentials were submitted - Email:${email} Password:${password}`
    );
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email:</label>
      <input
        name="email"
        type="email"
        value={email}
        onChange={handleEmailChange}
      />
      <label htmlFor="password">Password:</label>
      <input
        name="password"
        type="password"
        value={password}
        onChange={handlePasswordChange}
      />
      <input type="submit" value="Submit My Secure Form" />
    </form>
  );
};

export default BasicLoginForm;

My personal preference goes to using Function Components + React Hooks. 👌

Now that you know the basics. Next, check out pain-free forms with React Hook Form 🔥