React Form Management

This is the guided project for the Form Management module. It is a note taking app. During the guided project, you will help students be able to:

• use the onChange handler to capture input values
• utilize a form's submit event to work with form data
• demonstrate the ability to handle multiple inputs in a form
• use controlled inputs to manage form data

My Notes App

Starter: https://codesandbox.io/s/github/cmgorton/form-management-starter/tree/master/

Solution Sandbox: https://codesandbox.io/s/form-management-solution-fp29u

React Docs on forms

Instructions

1. Discuss how forms are pretty hard to manage, but they are a really important part of what we build as frontend developers. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
2. Look through the app

• note state is being passed to the Notes component, and the list of notes will be rendered there
• Show students the Form component that is pretty empty

1. In the Form component, use the regular old form elements to add an input and an associated label

<label for="title">Note title</label>
<input id="title" type="text" name="title" />

• label is associated with this input to help with accessibility the for is tied to the id on the input.

<aside> 📄 Goal: we want to get to the point that React is managing the state, but we'll look at that a little later. This has to do with controlled vs. uncontrolled inputs in React. https://reactjs.org/docs/forms.html

</aside>