Dynamic Forms.
Controlled vs Uncontrolled Components in react.
Practice making a dynamic form based on a JSON input,
Rules: name text based should enforce the need for a first and last name (separated by a space) date of birth date based required, should be older than 18 gender options based (male/female) optional contact number text based optional allow for multiple values (e.g. mobile, home, etc) require guardian consent checkbox optional guardian details (name, contact) text based required/applicable if consent checkbox is ticked
Acceptable output
{
name: "John Foo",
dob: "1990-01-01",
gender: 1,
contact: [{
type: "mobile",
value: "0400123123"
},{
type: "home",
value: "610000000"
}],
guardian: {
name: "Jane Foo",
contact: "0400123123"
}
}
Feelings: at the 2 hour mark.
Definitely felt the pressure of the 2 hours Limit, my first time using hooks (currently at work using an earlier version of React). it was an interesting Challenge
Controlled vs Uncontrolled components
I originally had the idea of a pure html5 form, with mapping and validation and was going to focus on uncontrolled, but I realised that probably wasn't the spirit of the challenge. So I started migrating towards controlled, I set a timer for the one hour mark, and didn't reset it for the 2 hour mark, before I knew it, 2.5 hours in and a broken form.
I'd like to come back to this Sunday Night and see if I can improve my progress.
I like to work in a codepen so you can see the form
Couldn't sleep so I worked a bit more, and am much more comfortable with this version. Still no Validation, and I'd love to make it look nicer too.
Overall I found this an excellent challenge, I got stuck on Synthetic events for a bit, and getting my head around React Hooks.
I found mostly I think in JavaScript rather than in React, and always tried to do things in pure objects or functions.