React checkboxes don't reset after submitting form

Question

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.

import React, { useState } from "react";
import styles from "./ProductForm.module.css";

const ProductForm = (props) => {

//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 = {
      isDayChecked: isDayChecked,
      isNightChecked: isNightChecked,
    };

//Reset the inputs after submit
    setDayChecking([]);
    setNightChecking([]); 
}
return (
//JSX code for checkboxes inputs (day and night)
<form onSubmit={submitHandler}>
      <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}
      />
      <button type="submit">Save</button>
</form>
 );
}

export default ProductForm;

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!

Answer 1

Here is fully working example of how to use checkbox. Understand the underlying concepts and write similar components. You cannot say checked={arrayData.includes(true)}. It is not wrong in javascript. But imagine if you have more than two value in array and we are gonna map it in React. For example, your array is [true, false, true, true, false]. Checkbox should not have two same value data and you should not pass boolean value to checkbox. In your question, you did not provide your array's data types. In my example, it is string and there is no same data.

const App = () => {
  const arrayData = ["1", "two", "not boolean", "something more", "and more"];
  const [myArray, setMyArray] = React.useState([]);

  const onSubmit = (e) => {
    e.preventDefault();
    // do submit
    setMyArray([]);
  };

  const onChange = (e) => {
    e.target.checked
      ? setMyArray([...myArray, e.target.value])
      : setMyArray(myArray.filter((o) => o != e.target.value));
  };

  return (
    <form onSubmit={onSubmit}>
      {arrayData.map((item) => (
        <label key={item}>
          <input
            value={item}
            onChange={onChange}
            checked={myArray.includes(item)}
            type={"checkbox"}
          />
          <span>{item}</span>
        </label>
      ))}
      <input type={"submit"} />
    </form>
  );
};
export default App;

If you don't have array and you want to use checkbox with boolean value. Here it is.

const App = () => {
  const [showPassword, setShowPassword] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    // do submit
    setShowPassword(false);
  };

  const onChange = (e) => {
    setShowPassword(e.target.checked);
  };

  return (
    <form onSubmit={onSubmit}>
      
        <label>
          <input
            onChange={onChange}
            checked={showPassword}
            type={"checkbox"}
          />
          <span>Show Password</span>
        </label>
      <input type={"submit"} />
    </form>
  );
};
export default App;