Create Dynamic Forms with the React Hook Form Library

React Hook Form tutorial: How to use the react-hook-form library to build dynamic forms.

Photo by Christina @ wocintechchat.com on Unsplash

In this tutorial, we will learn how to create a form with dynamic inputs or as some have called it, an expando/expanding form.

Dynamic input form example

Above is an example of what we are going to build today, in the first part I’ll focus purely on functionality meaning we won’t use any styles. This is so that we can really understand how it works before mixing in styled elements and confusing ourselves. In the second part, we will add styles to our existing project and also make its components reusable.

We will be using the following libraries/packages:

Part 1

• React — v17.0.2
• react-hook-form — v7.11.0

Part 2

• @material-ui/core —v4.12.1
• @material-ui/icons — v4.11.2

Once you have your react app running we will need to install some of the dependencies, you can use the following commands

## For react-hook-formm
npm install --save react-hook-form