Dynamic form fields using React with hooks

Photo by Austin Distel on Unsplash

Dynamically Adding Multiple Input Fields in React-Js

React makes building UI’s in JavaScript straightforward and easy, however some things can be a bit difficult to wrap your head around, things like dynamic forms. A dynamic form is one which allows us to dynamically add and remove form fields (form groups) if we want to enter more information in an HTML form.

This guide assumes you have a fair understanding of Javascript and React-JS. Also I’ll be using MATERIAL-UI for some components if you don’t mind ;).

Let’s create Input, and a Textarea as part of the form to get the input from the user. You can add other options too like select, radio buttons etc. depending on your requirements. But I intend to keep this post short and less boring so I won’t go into that stuff.

But first of all import ‘useState’ and MaterialUI ‘Button’;

Let’s create functional components to handle our input change and button click events.

handle Chnages in Input Field

functional component for adding multiple fields.

Functional Component for removing the desired field

Now let’s move on to our Front-end and create some input fields for our Form.

Wooohooo!

Wooohooo! Thats it ?

It is…..

Yupp! There you go, you can now add multiple columns by clicking the plus icon and delete the one you want.

Looks Something like this..

I am new here and this is my first Post and hence there might be some typos or errors. Feel free to point it out. Hope you like this post.