React Forms and Formik

The form is one of the most-used HTML elements in web development. Since the introduction of React, the way forms have been handled has changed in many ways.In React, there are two ways to handle form data in our components. The first way is by using the state within the component to handle the form data. This is called a controlled component. The second way is to let the DOM handle the form data by itself in the component. This is known as an uncontrolled component.​

Controlled Components

are those in which form data of the form is handled by the component’s state.Each form element contains a value. The value may be typed (input, textarea) or selected (checkbox, select, radiobutton, etc) by the user or browser. When the element’s value is changed (triggered by the act of typing or selecting), it is updated accordingly.You can get the value of an element using the .value property in its HTMLElement instance. You can also use the .value property to set values in the form elements.

<form>
  <input type="text" name="username" id="username" />
</form>

const input = document.getElementById("username");
const inputValue = input.value;

In React you can use our component state to hold or manage the values of the elements in a form element. And that's what is called Controlled Component

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  function onSubmit() {
    alert(`Name: ${name} Email: ${email}`);
  }
  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        name="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
      />
      <input
        type="email"
        name="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input type="submit" value="Submit" />
    </form>
  );
}

• Here we have two states: name and email. These states are assigned to the value property of the name and email input elements.

• The name state holds the value of the name input element. When a value is being typed in the name input, the onChange event attached to it sets the name state using the setName updater function and this in turn changes the value of the input to the new value in name state.

• The email state holds the value of the email input element. When a value is being typed in the email input, the onChange event attached to it sets the email state using the setEmail updater function and this in turn changes the value of the input to the new value in email state.

• As you can see, the values of our input elements name and email are controlled by the React state; the state becomes the “single source of truth” for the input elements. Therefore, the App component shown above is a controlled component.

The drawback to using controlled components is that the number of states in a component increases as more control elements are added to the form element. That's why we need to use a solution that in addition to fix this issue, it can do other stuff like form validation. This is Formik. A react forms library.

Formik

Formik is a React form library to ease the development of forms in React.

This is a tutorial that shows you how to use Formik in a React project.

Development tool and console environment

Additional Resources:

• Formik Docs

• Yup Docs