You provided 'checked' prop to a form field without onChange handler

You provided 'checked' prop to a form field without onChange handler #

The error "You provided a checked prop to a form field without an onChange handler" occurs when we set a checked prop on a checkbox that has no onChange handler. To solve the error, use the defaultChecked prop or set an onChange prop on the field.

you provided checked prop to form field

Here is an example of how the error occurs.

App.js

Copied!
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 issue in the code sample above is that we've set the checked prop on the input field without providing an onChange event handler. This makes the input's checked prop static.

One way to solve the error is to use the defaultChecked prop instead.

App.js

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

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

The defaultChecked prop is often used for uncontrolled (by the developer) checkboxes. This means that you would have to access the value of the field using a ref or as an element in a form.

App.js

Copied!
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>
  );
}

Every time you click on the button, the checked value of the checkbox will be logged to the console.

Alternatively, we can set an onChange prop on the input field and handle the event.

App.js

Copied!
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 did is store the checked input value in a state variable called isSubscribed.

We set the onChange prop on the checkbox, so every time its value is changed, the handleChange function is invoked.

We can access the checkbox via the target property on the event object.

Similarly, we can access its value via event.target.checked.

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

App.js

Copied!
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 for the checkbox will be checked.

Conclusion #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

You provided 'checked' prop to a form field without onChange handler

You provided 'checked' prop to a form field without onChange handler #

Conclusion #

Borislav Hadzhiev