Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: 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.

    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.

    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.