uncheck checkbox and radio button using Reactjs using props

Question

i want to uncheck my checkbox but it does uncheck but just after unchecking it gives error

    console.log()

    var x = document.getElementsByName("checkbox");
    for(let i=0; i<=x.length; i++) {
      x[i].Checked = false;
      }   
  }

<button onClick={() => clearClickHandler()}>Clear all filter</button>

<input type="checkbox" name="checkbox" defaultChecked={false} onChange={() => sortDispatch({payload: "INCLUDE_OUT_OF_STOCK"})}></input>
          Include out of stock
        </label>

Answer 1

Issue

Direct DOM mutations are anti-pattern in React and even if it wasn't throwing an error since the change happens outside of React, React won't be aware of the change and won't rerender the UI.

var x = document.getElementsByName("checkbox");
for(let i = 0; i <= x.length; i++) {
  x[i].Checked = false; // <-- mutation!!! should probably also be `.checked`
}

Solution

You can use Fully uncontrolled component with a key .

In order to reset the value when moving to a different item (as in our password manager scenario), we can use the special React attribute called key . When a key changes, React will create a new component instance rather than update the current one . Keys are usually used for dynamic lists but are also useful here.

Here's an example demo applying using a React key against a set of inputs.

function App() {
  const [key, setKey] = useState(0);

  const clearClickHandler = () => setKey((k) => k + 1);

  return (
    <div className="App">
      <Fragment key={key}> // <-- React key updates will "reset" inputs
        <label>
          <input type="checkbox" name="checkbox1" defaultChecked={false} />
          Include out of stock
        </label>
        <label>
          <input type="checkbox" name="checkbox2" defaultChecked={false} />
          Include out of stock
        </label>
        <label>
          <input type="checkbox" name="checkbox3" defaultChecked={false} />
          Include out of stock
        </label>
      </Fragment>

      <div>
        <button onClick={clearClickHandler}>Clear all filter</button>
      </div>
    </div>
  );
}

Answer 2

You can create refs attached to the elements you want to check and uncheck programmatically.

Then have a functions that manages the unchecking

uncheckAll() {
    // the length of the array below should
   //  depend on the numbers of ref you have

   [1].forEach((refId) => this.refs[`ref_${refId}`].unCheck)
}

Note: this assumes your components are based on class

<input type="checkbox" ref="check_1" defaultChecked={false} onChange={() => sortDispatch({payload: "INCLUDE_OUT_OF_STOCK"})}></input>
      Include out of stock
    </label>