Dynamic Forms

Forms are very important in modern applications.
They are the way for users to interact with our app.
Developers rely on forms for everything: securely logging in the user, searching and filtering the product list, booking a product, and building a cart, etc.
More complex applications built for enterprises are usually more form-intensive, with the input fields spanning over multiple tabs. On top of that, we have to consider the validation logic that needs to be deployed.
Unlike other DOM elements, HTML form elements work differently in React. EG: form data is usually handled by the component rather than the DOM, and is usually implemented using controlled components.

Controlled vs Uncontrolled Components

The form’s structure is similar to those of the usual HTML forms. However, each input element gets a component of its own, which we call dumb components.
The container component is responsible for maintaining the state. The difference is, we're using a callback function to handle form events and then using the container’s state to store the form data. This gives your component better control over the form control elements and the form data.
The callback function is triggered on events, including change of form control values, or on form submission. The function then pushes the form values into the local state of the component and the data is then said to be controlled by the component. Because we are using the value attribute on the form element, the value displayed will be the value of this.state.value.

There is another technique, popularly known as uncontrolled components, for creating input forms.
This is more like traditional HTML forms because the input form data is stored inside the DOM and not within the component.
Elements like and <textarea> maintain their own state, which they update when the input values change. You can query the DOM for the value of an input field using a ref.

React recommends using controlled components over refs to implement forms. Refs offer a backdoor to the DOM, which might tempt you to use it to do things the jQuery way.
Controlled components are more straightforward — the form data is handled by a React component.
However, if you want to integrate React with a non-React project, or create a quick and easy form for some reason, you can use a ref.

React's composition model lets us organize our React components into smaller reusable code.
Each component exists as an independent functional unit and an hierarchy of components can be used to represent a specific feature.
This structure works particularly well with forms. You can create custom components for , <textarea>, , etc. and reuse them to compose a FormContainer component.
FormContainer is a container component that renders all of the form elements and handles all of the business logic. We call it a container component because it takes care of updating the state of the form, handling form submission, and making API calls/dispatching Redux actions.
The dumb components or presentational components are concerned with how things look and contain the actual DOM markup. These components receive data and callbacks exclusively as props.

These are the input child components:
The component displays a one-line input field. The input type could be either text or number. Let's have a look at the props that we need to create an component.
type : The type prop determines whether the input field rendered is of type, text, or number. For instance, if the value of type is equal to number, then will be rendered. Otherwise, gets rendered.
title : The value of the title prop will be displayed as a label of that particular field.
name : This is the name attribute for the input.
value : The value (either text or number) that should be displayed inside the input field. You can use this prop to give default value.
placeholder : An optional string that you can pass so that the input field displays a placeholder text.
handleChange : A control function that gets triggered when the input control element's value changes. The function then updates the state of the parent component and passes the new value through the value prop.