Appointment planner: reset checkboxes on submit

Hello all,

I have basically completed this project the only thing I am not sure about is how to reset the checkboxes on submission of the appointment form.

This is how I solved adding contacts to an appointment. This is in the AppointmentsPage component :

  const [ attending, setAttending] = useState([]);
  const handleCheckboxChange = (e) => {
    if (e.target.checked) {
      setAttending((prev) => ([
        ...prev,
        e.target.name
      ]))
    } else {
      setAttending(attending.filter(
        item => item !== e.target.name
      ))
    }
  }

This then gets passed down through props to the Appointment form which maps over the list of contacts to provide checkboxes from which the user can select who they are going with.

        <p>Who are you going with?</p>
        {contacts.map((contact) => {
          return (
              <div>
                <input
                  name={contact.name}
                  id={contact.name}
                  type="checkbox"
                  className="contact-input"
                  value={contact}
                  onChange={handleCheckboxChange}
                  key={contact.id}
                />
                <label
                  htmlFor={contact.name}>
                  {contact.name}
                </label>
                <br />
              </div>
            )
        })}

This works well and I receive a list of who is attending which I can attach to handleSubmit function within the AppointmentPage component. However the checkboxes themselves are uncontrolled input and no matter how I try to reset them on submit I get the error “You cant change an uncontrolled to a controlled input.” I also tried to make Checkbox its own component which led to even more problems with passing down props and states etc. I found this all very confusing, Its the one part of the design spec that couldn’t quite crack. Any help would be much appreciated!