Intermediate
One state object, one handler
Rewrite this form so all its values live in one useState object: { name: "", email: "", city: "", newsletter: false }.
Use one change handler for all four fields. Each field has a name attribute matching its key (name, email, city, newsletter); the newsletter field is a checkbox.
Show the state under the form in <pre id="json">{JSON.stringify(form)}</pre>.
What Check tests
#jsonshows the starting object- Typing a name changes only
name - Email and city are stored too, and the name is kept
- The checkbox stores
true, not a string - One
useStateand a computed key[name]
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.