React checkboxes don't reset after submitting form

I'm quite new to React, so I decided to make a skincare app to learn the beast. I thus made a form to register the products, and this form contains checkboxes. My problem is, I cannot for the life of me get them to reset (empty?) after submitting the form. All the answers I've found were either too old or didn't work.

//Frequency checkboxes handler functions
  const [isDayChecked, setDayChecking] = useState([]);

  const dayFrequencyHandler = (event) => {
    const { value, checked } = event.target;
    // Case 1 : The user checks the box
    if (checked) {
      setDayChecking((checkedDays) => [...checkedDays, value]);
    }
    // Case 2  : The user unchecks the box
    else {
      setDayChecking(isDayChecked.filter((e) => e !== value));
    }
  };

  const [isNightChecked, setNightChecking] = useState([]);

  const nightFrequencyHandler = (event) => {
    const { value, checked } = event.target;
    // Case 1 : The user checks the box
    if (checked) {
      setNightChecking((checkedNights) => [...checkedNights, value]);
    }
    // Case 2  : The user unchecks the box
    else {
      setNightChecking(isNightChecked.filter((e) => e !== value));
    }
  };

//Submission function
const submitHandler = (event) => {
    event.preventDefault();
//Save data from the inputs
    const savedProductData = {
      name: name,
      brand: brand,
      type: type,
      openingDate: openingDate,
      expirationDate: expirationDate,
      isDayChecked: isDayChecked,
      isNightChecked: isNightChecked,
    };

//Reset the inputs after submit
    setName("");
    setBrand("");
    setType("");
    setOpeningDate("");
    setExpirationDate("");
    setDayChecking([]);
    setNightChecking([]); 
}

//JSX code for checkboxes inputs (day and night)
<form onSubmit={submitHandler}>
      /* Non-relevant code */
      <label>Frequency</label>
      <p>M</p>
      <input
        type="checkbox"
        value="Monday"
        name="day"
        onChange={dayFrequencyHandler}
      />
      <input
        type="checkbox"
        value="Monday-night"
        name="night"
        onChange={nightFrequencyHandler}
      />
</form>

As you can see, these checkboxes are used to register at what frequency the products are going to be used (one checkbox for the morning and one for the night, for each day of the week). The data is then stored into the empty array of useState(), or removed when the user unchecks its box. That part works fine.

What doesn't work fine though, is my submit function that refuses to clear the checkboxes once called. The most logical solution to me would be to reset the checkboxes' state to their original, well, state of empty arrays, like this:

const submitHandler = (event) => {
    event.preventDefault();

    setDayChecking([]);
    setNightChecking([]); 
  };

React obviously disagrees, since it doesn't work. The checkboxes are still checked on the form even after I submitted it. But if I call my submit function again (aka re-click on the submit button without checking anything again) without touching anything, the data (savedProductData)I console-logged tells me my checkboxes states are indeed set back to empty arrays. So clearly there isn't any data left in my state arrays once I've submitted the form. Yet the checkboxes still appear checked instead of being cleared out.

I guess my question would be, why don't the checkboxes appearing on the screen automatically clear when I submit my form and their states are back to empty arrays? And how do I get them to do so?

Thanks in advance!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/z6q7B29