Dealing with forms in React can seem intimidating. This playlist is a work-on-progress compilation of short screencasts about the subject. (And, it uses hooks throughout!)

For the curious, I have also [wrote articles on forms in React](https://goshakkk.name/on-forms-react/) and even self-published an ebook, [The Missing Forms handbook of React](https://goshakkk.name/the-missing-forms-handbook-of-react/)

Learn to use one of the built-in React hooks, `useState`, to make a single controlled input work.

We'll do this by creating a `name` state variable, and a `handleNameChange` function to update that state variable.

Note: you need to be using a version of React that supports Hooks (versions 16.8.0 and higher)

Handle an Input with React useState Hook

Learn to validate the presence of text in a single React input by displaying a green-check or a red-cross emoji next to it.

We'll do this by creating a variable `isValid` that will return true if any text is found in the state property hooked up to the input field. This newly created variable will be used in a ternary to display the correct emoji mentioned above.

Validate a Single React Input

You can validate your input and that's great — but screaming "you are wrong" before the user has had a chance to interact with it is not a good user experience.

Learn to display the validation status only after the user focuses out of the input. We will achieve that by creating a separate state variable called `touched` which will hold whether the user focused out of the input, which we'll later use to conditionally render the validation status.

Note: you need to be using a version of React that supports Hooks (versions 16.8.0 and higher) to follow this lesson.

Validate a React Input After the User Leaves the Input with the useState Hook

Learn to filter out the unwanted characters from your input.

We will achieve this by running `replace` on the new input value in the `onChange` handler, before updating the state.

Note: you need to be using a version of React that supports Hooks (versions 16.8.0 and higher) to follow this lesson.

The regexp at 1:07 should be `/[^a-zA-Z\s]/g` (with `g` added after the closing `/`)

Filter Out Specific Characters in a React Input

If you've ever tried to filter out characters from the input in the `onChange` handler, you've most likely ran into the issue when, if you're inserting something in the middle of the input, the cursor jumps to the end of the input.

This happens because React has no way of knowing where you want the cursor to be!

In this lesson, we will create a filtering function that accepts new text and current cursor position, and which returns the filtered text and the new cursor position. We then use a custom `useRunAfterUpdate` hook after the set state call to update the cursor position after the component has re-rendered.

Working with Forms in React

Instructor

Course content (5 lessons)

Instructor