React and Forms
(Note: the "linked state mixin" and "two-way binding" approaches described in some of these articles are still valid, but mostly discouraged at this point. The more idiomatic approach is "one-way data flow" with "controlled inputs".)
"Controlled" and "Uncontrolled Inputs
React Docs: Forms
The React documentation page on forms. Describes "controlled" and "uncontrolled" form inputs.
React "controlled" vs "uncontrolled" inputs
An explanation of the terms "controlled inputs" and "uncontrolled inputs"
React Form Components
A look at controlled vs uncontrolled inputs, with a useful note about issues with controlled inputs and certain browsers.
Uncontrolled components are an anti-pattern
Argues that uncontrolled components are a bad idea and should be avoided.
ReactJS and controlled forms
A look at the difference between controlled and uncontrolled inputs, and some problems that can come from using uncontrolled inputs.
Managing React Controlled Component State
Some short examples of how to properly manage state for controlled inputs
Managing state and controlled form fields with React
Describes the concepts of "controlled" and "uncontrolled" inputs.
React Hates me: "Overcontrolled" components
Describes some specific issues with controlled inputs and the preventDefault method
React.js Forms: Controlled Components
An excellent article that describes the concept of controlled components, and demonstrates examples of how to interact with different types of form inputs
Controlled and uncontrolled form inputs in React don't have to be complicated
A great summary of what controlled and uncontrolled inputs are, what each approach looks like, and how to handle values from different types of inputs.
Controllable React Components
A slideshow discussing how React components can themselves either be controlled or uncontrolled, and introducing a library to help make components controllable.
Collecting data from a wizard form
Examples of how to handle data management for a multi-step form
React Forms: Using Refs
A quick recap of what "controlled components" are, and some excellent examples of how to use refs to directly access values for different types of inputs in forms
Understanding your options with forms in React
A quick summary of the three major forms approachs (controlled inputs, uncontrolled inputs + refs, uncontrolled inputs + serialization), with code examples for each
Transitioning from uncontrolled inputs to controlled
Explains how to refactor React forms with uncontrolled inputs to use controlled inputs instead.
Tightly Controlled Textareas - Building solid plain text editors in React
A tutorial for implementing controlled behavior for a simple Markdown text editor component, including examples.
Form Tutorials and Usage
Learn Raw React: Ridiculously Simple Forms
Covers the basics of implementing form rendering, updates, and validation, in plain JS
Forms in React and Redux
Demonstrates building a simple set of wrapper components to manage forms using React and Redux
Not-so-simple Forms with React
Explains how to set up more advanced form scenarios such as optional or repeatable sections.
Using React's state to manage data entry
Describes how to manage data for forms using React component state and some wrapper components.
Handling React Forms with Mobx Observables
Some examples of working with forms in React, using MobX for the data management.
Building a Multi-Step Registration Form with React
A form example that shows how to track the current form step, render the right form component, and store all the necessary form data
Making dynamic form inputs with React
Covers how to build a form that can add and remove entries dynamically, with examples.
How to handle forms with just React
Should a form for editing update the underlying model?
Some quick thoughts on ways to handle tracking data in a form - whether it should be fully controlled by a parent, or accept the initial values and report them when it's submitted.
Modeling form state in React
Examples of how to structure form state to handle values and validation. Applicable no matter what state management approach is being used.
Better Form Management
A couple useful examples of approaches for simplifying React form handling logic.
Forms in React
Slides for a workshop on approaches for managing forms in React. Includes summaries of the various major approaches for managing forms, and links to several useful form-related libraries.
Some Thoughts on Forms in React
An extended look at several form-related concepts, including describing them as "view-driven" vs "model-driven", extracting form management into a Higher-Order Component, adding validation, and more.
How to Work with Forms, Inputs, and Events in React
An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app.
Form Validation Tutorial with React.js
A good example of setting up form validation in React
Elegant Form Validation in React
Examples of adding validation to a form
Two-Way Data Binding and Form Validation in React
Another demonstration of building a form with some logic and validation.
Form Validation as a Higher Order Component
A 2-part series, demonstrating how to use Ramda and FP approaches to create validation logic
Form recipe: Conditionally disabling the Submit button
Some simple examples of validating data from controlled inputs
Instant form field validation with React's controlled inputs
Examples of how to perform validation during rendering, and immediately show which inputs are invalid
Really Dumb Form Validation
Some quick examples of simple but effective form validation handling inside of React components.
Why not field-level validations?
Thoughts on why it's better to handle validation at the "whole form" level, rather than strictly per-field.
Validating React forms upon submit
Discusses core concepts of validating form inputs, and demonstrates how to handle validations on submit for both uncontrolled and controlled components.
Creating new fields and widgets for Mozilla's react-jsonschema-form
Examples of working with the react-jsonschema-form library, including defining form schemas, gotchas, and customization with specific widgets and types
List or Form, why not both? Making a list with a built in editor in React
Builds an example of a list with the ability to do inline editing of items.
Comparison of form libraries in React
A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage.
The Joy of Forms with React and Formik
Looks at some of the complexities with handling forms in React, and how the Formik library can help simplify that logic.
Painless React Forms with Formik
Describes how the Formik library can help solve transforming props to form state, validation and error messages, and handling form submission.
Formik - Handling files and reCaptch
Demonstrates how to use the Formik library to accept uploaded files and work with reCaptcha validation.
Final Form / React Final Form
Erik Rasmussen, author of the popular Redux-Form library, introduces his new framework-agnostic Final Form library and its bindings for React.