Validate a Single React Input
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.
How are you embedded to emoji ?
The shortcut is cmd-ctrl-space on Mac
How are you embedded to emoji ?