5. Rendering Lists & Conditional Content
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 here) 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 this activity:
- Create a new React project and remove the default JSX code returned by the
App
component. Instead, return a<form>
element that contains an<input>
oftype="text"
(for the purpose of this activity, it should not betype="email"
to make entering incorrect email addresses easier). Also add a<label>
for the<input>
and a<button>
that submits the...