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
Next
button is not clickable unless all 3 fields have user input - The
Thanks
component renders when a user over the age of 18 signs up - The
ErrorPage
component renders when a user under the age of 18 tries to sign up
- 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
Form.jsx
render statement... - The majority of your work will be done in
Form.jsx
. - Make sure to pass in a
name
andvalue
attribute to your inputs like so:
<input name="someKeyInFormState" value={props.someValueFromFormState} />
- 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!