React Forms

At some point, every app needs a form to collect some sort of user input. Managing forms in React might be a little bit different than you are used to, so it's important to figure out what's the React-way of dealing with forms. This topic offers you a collection of links to cover everething there's to know about forms in React.

8 resources available

Building forms using React — everything you need to know

Forms are integral to any modern application. They serve as a basic medium for users to interact with your app. In this tutorial, we're going to look at how React handles forms. We'll cover not just the basics, but also form validation and best practices too — even experienced developers get certain [continue]

Tutorial by Manjunath

An imperative guide to forms in React

In this tutorial, I will explain how React deals with forms and events. I'll also walk you through how to write code that helps to get input from the different form components and submit the data in a React application. Finally, I'll show how to use the Formik library to build all kinds of forms, from [continue]

Article by Yomi

How to Work with Forms in React

This article covers how to capture text input and input via other form elements like input, textarea, and option. Working with them is paramount to web development, because they allow our applications to receive data (e.g. text) and actions (e.g. clicks) from users. [continue]

Article by Azat Mardan

How to code a form in React

Learn how to create a form in React without using any libraries. Starting from scratch, I show you how to create a form component that uses local state. Additionally, it will pass data to other components allowing you to create a live preview of what the user is typing into the form. [continue]

Video Tutorial by Ben Awad

How to handle forms with just React

If you ever had a feeling that working with forms in React was too much boilerplate or that maybe angular used to provide a superior experience or you just wish to know what might be the 'best way' to organize forms in react, then read on. [continue]

Article by Everdimension

Get Started with redux-form

The redux-form library bills itself as the best way to manage your form state in Redux. It provides a higher-order form component and a collection of container components for dealing with forms in a React and Redux powered application. Most importantly, it makes it easy to get a form up and running with [continue]

Article by Josh Branchaud

Using forms in React-Redux: Tips And Tricks

It has been a pretty long time already that i have been using React and Friends and wanted to share what was one of our biggest pains and how we overcame them — implementing forms. A lot of web applications are form-based, you give the user the ability to use your platform by filling forms and manipulating [continue]

Article by Royi Schwartz

React Forms: Using Refs

React provides two standard ways to grab values from <form> elements. The first method is to implement what are called controlled components and the second is to use React's ref property. The article will show you how to work with inputs, text areas, checkboxes and radio sets by using refs. [continue]

Article by Loren Stewart

Understanding forms in React / React form validation library / React controlled and uncontrolled components / React form examples / React form submit / React form libraries / React Redux form validation / React multiple checkboxes / React select example / React get form values on submit / React onchange pass value / Handling multiple inputs on React form / Alternatives to controlled components / Recommended way of working with Forms in React / Defining the form and its events in React / Forms and events in React / onChange vs onInput