Building Enterprise JavaScript Applications

Maintaining the state and listening for events

Let's work on the Input component a little more. When a user types inside the input box, it'd be great for user experience to validate the user's input and display an indicator next to it. The indicator can be colored green if the input is valid, or red if not.

Therefore, our Input component needs to:

• Listen and handle events, so that it can validate the input when the value changes.
• Maintain the state, so the component can persist the result of the validation.

Currently, our Input component is defined in the functional components style. This is preferred but it is limited in features; it cannot hold the state. Therefore, let's first convert the Input component into a class component:

class ...