React Forms

Let's talk about how forms are handled in React. 

In a regular HTML form, the state of the form is typically managed by the browser. It doesn't update the server until the user hits *submit*. 

Things work a bit differently in React. In a React form, the state of the form can be managed by the component, and updates are triggered by the `onChange` event. When the user interacts with an input, such as entering or deleting any characters, the `onChange` event fires and updates the component state. 

This allows the component to immediately reflect any changes made by the user and update the view accordingly. 

Let's dive into how it works.

Input onChange

There are two terms that will probably come up when you talk about React forms: **controlled component** and **uncontrolled component**.

An *uncontrolled component* is a component that maintains its own internal state. A *controlled component* is a component that does not maintain any internal state. Since a controlled component has no state, it must be *controlled* by someone else.

Think of a typical `<input type='text' />` element. It appears on the screen as a text box. If you need to know what text is currently in the box, then you can ask the `<input>` element, possibly with some code like this:

```js
let input = document.querySelector('input[type="text"]');

let typedText = input.value; // input.value will be equal to whatever text is currently in the text box.
```

The important thing here is that the `<input>` element *keeps track of* its own text. You can access what its text is at any time. 

The fact that `<input>` keeps track of information makes it an *uncontrolled component*. It maintains its own internal state by remembering data about itself.

A controlled component, on the other hand, has no memory. If you ask it for information about itself, then it will have to get that information through `props`. Most React components are *controlled*.

In React, when you give an `<input>` element a `value` attribute, then something strange happens: the `<input>` element *becomes controlled*. It stops using its internal storage. This is a more "React" way of doing things. 

Recall that in our exercises, the page updated every time we typed into the input. React controlled the input's value with the state. We've been demonstrating the idea of a controlled component all along!

You can find more information about [controlled and uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) in the React documentation.

Controlled vs Uncontrolled

Let's define an *event handler* function that gets called whenever a user enters or deletes any character inside the `<input>` element.

The event handler function will listen for `change` events. You can see an example of an event handler listening for change events in **Example.js**. 

Write an Input Event Handler

Good! Any time that someone types or deletes in the `<input>` field, the `handleUserInput()` function will update `userInput` with the `<input>`'s text.

Since we're using `setUserInput`, that means that `userInput` needs an initial state! We'll need to use the State hook. What should the state's initial *value* be?
 
Well, `userInput` will be displayed in the `<input>` element. What should the *initial* text in the `<input>` be when a user first visits the page?
 
The initial text should be an empty string! Otherwise, it would look like someone had already typed something. 

Set the Input's Initial State

Great work! You just wrote your first React form.

Here's a review: 
* The state of a React form is managed by the component, and updates are triggered by the `onChange` event.
* The `onChange` event uses an event handler to capture changes and determine what actions to take.
* A React form uses the State hook to store the value of the input field in the component's state. The state can then be updated with the state setter. 
* React components can be controlled or uncontrolled. Most React forms are controlled, as they control the input's value with the state.

That marks the end of this lesson! The skills you've learned with React forms will be invaluable as you continue to build out more React apps!

Review

Think about how forms work in a typical, non-React environment. A user types some data into a form's input fields, and the server doesn't know about it. The server remains clueless until the user hits a "submit" button, which sends all of the form's data over to the server simultaneously.

In React, as in many other JavaScript environments, this is not the best way of doing things.

The problem is the period of time during which a form thinks that a user has typed one thing, but the server thinks that the user has typed a different thing. What if, during that time, a *third* part of the website needs to know what a user has typed? It could ask the form or the server and get two different answers. In a complex JavaScript app with many moving, interdependent parts, this kind of conflict can easily lead to problems. 

In a React form, you want the server to know about every new character or deletion, *as soon as it happens*. That way, your screen will always be in sync with the rest of your application. 

When a user types in the `<input>` field, then that will trigger a *change* event, which will call `handleUserInput()`. That's good!

`handleUserInput()` will set `userInput` equal to whatever text is currently in the `<input>` field. That's also good!

There's only one problem: you can set `userInput` to whatever you want, but `<input>`'s `value` prop will not update. 

In React, the `value` prop of an input element is used to control the value of the input and keep it in sync with the component's state. Without setting the `value` prop, changes made to the input would not be reflected in the component's state, leading to inconsistencies and potential bugs down the line. 

To ensure that the input's value matches the component state, we can set the `value` prop and use the `onChange` event to update the state with the new value. When the state is updated, the component re-renders, and the `value` prop is set to the new value from the component's state. 

This makes the component state the "source of truth" for the input's value, ensuring that the form data is consistent and can be easily managed and submitted. 

For example, if we had a login form with an email and password input, we would set the value prop for both inputs and update the component's state whenever the user types in a new email or password. This way, the form data is always up to date with the user's input.