Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modelling Dynamic Forms as React Component

How to model dynamic forms as a React Component?

For example I want to create a form shown in an image below:

  1. How can I model this as a React component?
  2. How can I add dynamicity to that component? For example, clicking on "+ Add" button creates another empty textbox and puts it right below the other already rendered textboxes (as shown in an image below).

Can someone help me with the code for the Form below?

enter image description here

like image 984
Lokesh Agrawal Avatar asked May 31 '18 18:05

Lokesh Agrawal


People also ask

How do you make a form dynamic in React?

The values will be input.name and input.Create a function called handleFormChange. Assign this function to the input fields as an onChange event. This onChange event takes two parameters, index and event. Index is the index of the array and event is the data we type in the input field.

What is dynamic component in React?

As the building blocks of React applications, components are dynamic, in that they can describe a template of HTML and fill in variable data. This lesson builds a real example of a blogging application to illustrate dynamic components.

What is componentDidMount and componentDidUpdate?

componentDidMount() : invoked immediately after a component is mounted (inserted into the DOM tree) componentDidUpdate(prevProps, prevState, snapshot) : is invoked immediately after updating occurs. This method is not called for the initial render.


1 Answers

In tags I see redux so I can suggest redux-form. Here you have an example of dynamic forms with redux-form.

like image 89
mradziwon Avatar answered Oct 18 '22 01:10

mradziwon