Forms

As soon as we start building a real application with React, we need to interact with the users. If we want to ask for information from our users within the browser, forms are the most common solution. Due to the way the library works and its declarative nature, dealing with input fields and other form elements is non-trivial with React, but as soon as we understand its logic, it becomes clear.

Uncontrolled components

Let's start with a basic example: displaying a form with an input field and a submit button.

The code is pretty straightforward:

const Uncontrolled = () => ( 
  <form> 
    <input type="text" /> 
    <button>Submit</button> 
  </form> 
) 

If we run the preceding snippet in the browser, we can see exactly what we expect: an input field in which we can write something, and a clickable button. This is an example of an Uncontrolled Component, where we do not set the value of the input field, but we let the component...