React error report You provided a `checked` prop to a form field

The text starts here~

Overview

When we set the checked property on the checkbox, but there is no onChange handler function, it will produce "You provided a checked prop to a form field without an onChange handler" error. To fix this error, you can use the defaultChecked attribute, or set the onChange attribute on the form field.

Here is an example to show how the error occurs.

 // App.js

export default function App() {
  // ⛔️ Warning: You provided a `checked` prop to a form field
  // without an `onChange` handler. This will render a read-only field.
  // If the field should be mutable use `defaultChecked`.
  // Otherwise, set either `onChange` or `readOnly`.
  return (
    <div>
      <input type="checkbox" id="subscribe" name="subscribe" checked={true} />
    </div>
  );
}

The problem with the above snippet is that we set the checked attribute on the input form, but not the onChange event handler. This makes the input checked property of ---a58a18cebb1264a5ada4d358d98fe796--- static.

defaultChecked

One way to fix this error is to use the defaultChecked attribute instead.

 export default function App() {
  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        defaultChecked={true}
      />
    </div>
  );
}

defaultChecked attribute sets an initial value for the checkbox, but the value is not static and can be changed.

defaultChecked attributes are often used for uncontrolled (not controlled by the developer) checkboxes. This means you have to use ref or form element to access the value of the form field.

 // App.js

import {useRef} from 'react';

// 👇️ Example of uncontrolled checkbox
export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.checked);
  };

  return (
    <div>
      <input
        ref={ref}
        type="checkbox"
        id="subscribe"
        name="subscribe"
        defaultChecked={true}
      />

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

Whenever you click the button, the value of the checkbox checked is printed to the console.

onChange

Alternatively, we can set the onChange attribute on the input form field and handle the event.

 import {useState} from 'react';

export default function App() {
  const [isSubscribed, setIsSubscribed] = useState(false);

  const handleChange = event => {
    setIsSubscribed(event.target.checked);

    // 👇️ this is the checkbox itself
    console.log(event.target);

    // 👇️ this is the checked value of the field
    console.log(event.target.checked);
  };

  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        onChange={handleChange}
        checked={isSubscribed}
      />
    </div>
  );
}

The first thing we do is store the input checked value of ---d6fcd582d95f99ffde49a55fa05cbd76--- in a state variable called isSubscribed .

We set the onChange attribute on the checkbox, so whenever the value changes, the handleChange function will be called.

We can access the checkbox via the target event object. Similarly, we can access the value of the checkbox by event.target.checked .

initial value

If you want to provide an initial value for the checkbox, just pass it to the useState() hook.

 import {useState} from 'react';

export default function App() {
  // 👇️ set checked to true initially
  const [isSubscribed, setIsSubscribed] = useState(true);

  const handleChange = event => {
    setIsSubscribed(event.target.checked);

    // 👇️ this is the checkbox itself
    console.log(event.target);

    // 👇️ this is the checked value of the field
    console.log(event.target.checked);
  };

  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        onChange={handleChange}
        checked={isSubscribed}
      />
    </div>
  );
}

We passed true --- to the useState hook, so the initial value of the checkbox will be checked .