Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Validate a Single React Input

    Gosha ArinichGosha Arinich
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a 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
    Discuss

    Discuss

    Transcript

    Transcript

    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.