j1marotta/dynamic-forms

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

here

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.