Objectives:

• control forms and form inputs (checkbox, dropdown) in custom forms
• validate user input in forms
• make POST requests to pass data collected from a form to a database

Starter Code

Solution Code

Step 1:

Set up initial form inputs

<form >
      <label htmlFor="name">
        Name
        <input
          type="text"
          name="name"
        />
      </label>
      <label htmlFor="email">
        Email
        <input
          type="text"
          name="email"
        />
      </label>
      <label htmlFor="motivation">
        Why would you like to help?
        <textarea
          name="motivation"
        />
      </label>
      <label htmlFor="positions">
        What would you like to help with?
        <select id="positions" name="positions">
          <option value="Newsletter">Newsletter</option>
          <option value="Yard Work">Yard Work</option>
          <option value="Administrative Work">Administrative Work</option>
          <option value="Tabling">Tabling</option>
        </select>
      </label>
      <label htmlFor="terms" className="terms">
        <input
          type="checkbox"
          name="terms"
          checked={true} {/* will change later with state */}
        />
        Terms & Conditions
      </label>
      <button>Submit</button>
    </form>

Step 2:

Set up initial state for all of out inputs

// managing state for our form inputs
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    terms: "",
    positions: "",
    motivation: ""
  });

Step 3:

• Import yup. https://github.com/jquense/yup
• Set up state for errors
• Set up Yup Schema