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
    Transcript

    Transcript

    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.

    Discuss

    Discuss