React Simple Login Example
August 31, 2021
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.