9 - React forms.

Speck Academy 2021

React forms

Formik & Yup

​

​

​

​

​

1

2

Overview

1

React forms

React Forms overview

About Forms

Uncontrolled components

Controlled components

Handling forms in React

​

​

​

​

​

​

​

​

​

​

About Forms

​

HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state.

Default HTML form behaviour is to send submitted data to another or the same script, but in most cases we don’t want this behaviour.

In most cases we want to have JS function that handles the submission of the form and has access to the data that user entered into the form.

In React we can handle form by use of Controlled and Uncontrolled components.

​

​

​

​

Controlled vs Uncontrolled components

​

In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

Some of the HTML elements acts only as an uncontrolled components, for example the <input type=”file” /> which lets the user choose one or more files from their device storage to be uploaded to the server or manipulated by JS via the File API.

File input is always uncontrolled because its value can only be set by a user, not programatically.

Here you can read more about the differences: article 1, article 2.

​

​

​

​

Controlled components

​

In the controlled component, the form data is handled by the state within the component.

The state within the component serves as “the single source of truth” for the input elements that are rendered by the component.

If we are using controlled components and define input with value prop, without onChange prop, then the warning will be shown in the console. In React this mean that this is just a read-only property.

​

​

​

​

​

Controlled components

​

In order to define controlled component, you must define state of the component, value prop with the state value and onChange prop with handler that changes state value.

Every time you type a new character handleChange is called.

Now the component is considered as a controlled component.

​

​

​

​

​

​

Controlled components

​

In React, textarea and select elements accepts value and onChange props, while in the HTML value prop is not allowed on that type of elements.

If you need to handle change of the multiple inputs, then try to use JS computed properties (but they need to be used in combination with name attribute).

While changing functional component state and state is object with few properties, use spread operator if all of the object values are not changed.

​

​

​

​

​

​

Uncontrolled components

​

Uncontrolled components act more like a traditional HTML form elements.

The data for each element is stored in the DOM, not in the component.

Instead of writing an event handler for all of your state updates, you use a ref() to retrieve values from the DOM.

Refs provide a way to access DOM nodes or React elements created in the render method.

​

​

​

​

Handling forms in React

​

It can be cumbersome if there are a large number of input elements on the page each element requires setup with a value attribute and event handler.

Also it will takes a lot of time if you need to implement custom form inputs validation, because you’ll need to define a lot of additional components states and handlers.

Common libraries that allows us to implement complex forms easily:

• Formik
• React Hook Form
• Redux Form

​

​

2

Formik & Yup

Formik

​

Formik takes care of the repetitive and annoying stuff, keeping track of values/errors/visited fields, orchestration validation and handling form submission.

• You’ll spend less time wiring up state and change handlers and more time on business logic

Formik is a small group of React components and hooks for building forms in React and React Native.

To use this module you’ll need to install package from the npm by typing:�npm install formik --save

​

​

​

​

​

Formik & Yup

​

Import the useFormik hook from the library.

• Define initialValues of form
• Set up validation schema, if you want to handle complex validation easily use Yup.
• Define logic of onSubmit method.
• Pass formik.handleSubmit into Forms onSubmit prop.
• Build your form.

​

​

​

​

​

Formik & Yup

​

Formik allows us helper method getFieldProps() that automatically generates onChange, onBlur, value and checked for specific input.

• This can be used on input, select & textarea
• Only thing we need to define is id and type of input.
• For the labels inside React we must use htmlFor attribute instead of for in HTML.
• Submit button inside Formik form must have type=”submit” attribute.

​

​

​

​

​

Formik & Yup

​

Error messages:

• Normally we want to display error messages only if input is visited, so we can use formik.touched for that.
• We have access to formik errors object.

Validation:

• Yup has many methods with which we can validate specific cases, and normally in the real world you’ll need to find out how to handle specific case in their documentation.

​

​

​

​

​

​

Formik & Yup

​

Yup can be installed with npm install yup --save.

We showed only basic form handling with Yup and Formik, but there are also a more complex use cases and for that you’ll need to read everything related to their library inside documentation.

However, things that we done here are already enough and we can achieve a lot with that, but for some cases and for even better code optimization you’ll need to research a bit.

​

​

​

​

​

3

Hands-on

Hands-on

Link to Hands-on

​

​

4

Homework

Homework

Link to Homework

​

​