Reducing boilerplate code with generic components

In this section, we are going to create generic Form and Field components that will take care of the state management we implemented in the last section. This means that we won't have to implement state management for each field in the forms we are going to build. This will dramatically reduce the amount of code required to implement a form.

Creating a Form component

Let's perform the following steps to create a generic Form component:

1. Create a new file called Form.tsx with the following import statements:

import { FC, useState } from 'react';
import { PrimaryButton, gray5, gray6 } from './Styles';
/** @jsx jsx */
import { css, jsx } from &apos...