Apply What You Learned
You are now able to use your React knowledge to change dynamic user interfaces in a variety of ways. Besides being able to change displayed text values and numbers, you can now also hide or show entire elements (or chunks of elements) and display lists of data.
In the following sections, you will find two activities that allow you to apply your newly gained knowledge (combined with the knowledge gained in the other book chapters).
Activity 5.1: Showing a Conditional Error Message
In this activity, you’ll build a basic form that allows users to enter their email address. Upon form submission, the user input should be validated and invalid email addresses (for simplicity, here email addresses that contain no @
sign are being referred to) should lead to an error message being shown below the form. When invalid email addresses are made valid, potentially visible error messages should be removed again.
Perform the following steps to complete...