The Scenario
The basic wizard was a success, but the business logic has become much more complex. If the user selects "Married", a whole new section for "Spouse Details" must appear. Furthermore, the validation rules are getting out of hand (e.g., age must be > 18 but < 100, zip code must match the selected state).
The Brief
Upgrade the form to use a dedicated validation library (like Zod or Yup) and a form state manager (like React Hook Form or Formik). Implement conditional rendering: fields should appear or disappear based on the answers to previous questions. Ensure the validation schema updates dynamically based on these conditions.
Deliverables
- The validation schema definition (e.g., the Zod object)
- The React component showing the conditional rendering logic
- A brief explanation of why integrating a library like React Hook Form improves performance over raw `useState`
Submission Guidance
This task tests your ability to use industry-standard tools. Do not write custom validation logic for complex rules; rely on the schema library to do the heavy lifting safely.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.