React Simple Login Example

Creating a simple login form with react means you need to forget what you know about html forms. Actually, this advice goes for creating any type of form with react. I will say that having some knowledge about events and input attributes is still helpful.

The basic idea is that I’m creating a controlled component, where the component state is updated based on what the user types into the input fields. The form and inputs still use some html common html attributes like required, name, and type, but most of the form is controlled by react.

// login-form.jsx
import React, { useState } from "react";

export const LoginForm = () => {
  const [loginFormValues, setLoginFormValues] = useState({
    username: "",
    password: ""
  });

  const handleChange = (event) => {
    setLoginFormValues({
      ...loginFormValues,
      [event.target.name]: event.target.value
    });
  };

  const handleSubmit = (event) => {
    // TODO: send the data to a server somewhere
    console.log(loginFormValues);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>
        <label htmlFor="username">Username</label>
        <input
          id="username"
          value={loginFormValues.username}
          onChange={handleChange}
          name="username"
          type="text"
          required
        />
      </p>
      <p>
        <label htmlFor="username">Password</label>
        <input
          id="password"
          value={loginFormValues.password}
          onChange={handleChange}
          name="password"
          type="password"
          required
        />
      </p>
      <input type="submit" value="Submit" />
    </form>
  );
}

// package.json
...
"react": "^17.0.2",
...

I’m using React’s useState hook here to initialize and update the state. The most important part about this design is that the state keys, “username” and “password”, match the input name attribute values. This is so the handleChange function can correctly update the state values when users type in the inputs.

The handleChange function is passed to both inputs via React’s onChange attribute. Passing the function as onChange={handleChange} means that the event object from the change event will be passed as the first argument to the function. I can then access the name attribute and the value attribute on event.target (the input), and map them to the state values.

The handleSubmit function will eventually do something with the state data. In this example, I’m calling the function on the form element onSubmit. It’s also common to see submit functions being called on submit button or input onClick events. I like the form element onSubmit approach because I think the code is clearer and it better browser support for if a user presses the Enter button to submit the form.

This react simple login example doesn’t have any styles applied yet, but it does work as expected. The main improvement to the functionality would be to send the data somewhere. After that, it’s a matter of making the form look nice.