How to Store Checkbox Values in a useState Hook in React.js

Published Jan 30, 2022  ∙  Updated May 2, 2022

How can we store our checkbox boolean value in a useState() hook?

It’s quite simple to target the value stored in the checkbox using event.target.checked. We can then pass it into our set function.

import React, { useState } from "react";
export const Checkbox = () => {
  const [permission, setPermission] = useState(false);
  return (
    <input 
      type="checkbox"
      checked={permission}
      onChange={e => setPermission(e.target.checked)} 
    />
  )
}