Handle an Input with React useState Hook

Validate a Single React Input

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

Filter Out Specific Characters in a React Input

Preserve cursor position when filtering out characters from a React input

Working with Forms in React

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.

Instructor: [00:01] We have this simple React application that displays a name input. The value of that input is stored in state. It's sent past to the input component, and whenever that value changes, the handleChange function updates the state.

[00:19] We can see that the input is working. Now, to validate the input, we will create a const, isValid. The input will be valid when the value is not an empty string. We can now use the isValid variable to conditionally render.

[00:36] If isValid is true, then we'll show a green checkmark. Otherwise, we'll show a red cross. Now, we can see that the input shows a red cross next to it, but once we type something in, it's working.

Course

Working with Forms in React

Validate a Single React Input

Share this video with your friends