Dynamic form fields using React with hooks

Dharam Dhurandhar
Jul 19 · 2 min read

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.

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

Wooohooo! Thats it ?

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

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade