Clean form code. Pretty elegant + covers best practices. This video also showed me some previously unknown HTML features.

https://www.youtube.com/watch?v=tIdNeoHniEY

This might seem confusing at first glance. However this is just simple "nested destructruing" and "smart function parameters" used together

Read the "Nested Destructuring" and "Smart Function Parameters" sections from the link below to get a better idea of what's going on.

https://javascript.info/destructuring-assignment#object-destructuring

the set() function can also be written as -----

let set = (name) => {
    return ( (e) => {
        setDetails( {...details , [ name ] : e.target.value });
        console.log(details);
    })
}

notice how the predeclared variable name is being used as a key in the object. { [name] : value } NOT { name : value}. Skipping the box brackets will throw you an error This is because name is actually a variable. Similar to the way in which we use object[key] = value; notation to add a k-v pair, we have to use { [name] : value } ie. enclose the variable name in square brackets while creating an object using object literal syntax to make sure that the code works