Dynamic Forms

Forms in React

In React, forms are different than other DOM elements. Rather than letting the browser do all the work of submitting a form, in React we usually have a "controlled" component handle the submit action of a form.

One distinction is that each element in a form is usually given it's own separate "dumb" component in React. These components render the actual form elements like inputs, select boxes, radios, checkboxes, etc.

It's best to structure your forms in small, modular, reusable components. It's best to put all the dumb components within a container, which manages the state and has all the actual handler functions within it. This container component would actually render the form with all the other "dumb" components within the form as props.children