JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Follow publication

Member-only story

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

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-formmnpm install --save react-hook-form

--

--

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Written by codebrew.blog

Software Engineer, learning DevOps, tryna make a living

Responses (2)

Write a response