In this lab, we'll be working with a provided sign-up form to conditionally render components based on the user's input.
Fork
andClone
cd
intou2_lab_conditional_rendering
npm i
Using the provided components, create an environment where:
- The user will go through three "pages" of a sign up process (Landing, Form, Thanks OR Error)
- The buttons on each page will navigate the user through the process
- The
Next
button is not clickable unless all 3 fields on the form have user input - The
Thanks
component renders when a user over the age of 18 signs up OR theError
component renders when a user under the age of 18 tries to sign up
- A landing page that welcomes the user to our site
- A Form that allows them to "sign up"
- If everything is filled out correctly, a Thank You page that thanks them for signing up
- An Error page that appears if the user does not meet the age requirement
- Take a look at what is already provided in the app. Using the state we have, how could we decide which components to render under certain conditions?
- Consider the many conditional statements we've used throughout this course (if/else, switch, ternary). Which would be best for this situation?
- The app will not render any components until you've called them in the
Home.jsx
render statement... - The majority of your work will be done in
Home.jsx
.
- Configure the
Back
buttons to reset the state and return to the welcome page. Maybe a helper method in theApp
component could be useful? - Style it up!