[How I Fixed]: Warning: You provided a checked prop to a form field without an onChange handler.

Today’s error is likely going to make you want to kick yourself. I certainly felt like quite a wally after realising my mistake. But I do like to blog these as I hope that by doing so, I shame myself into remembering the solution in the future.

OK, the error message:

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`.
    at input
    at div
    at fieldset
    at ProgrammingLanguagesTableNoResultsDisplayCheckboxes (webpack-internal:///./pages/it/programming-language/index.tsx:206:64)
    at section
    at main
    at div
    at div
    at ProgrammingLanguage (webpack-internal:///./pages/it/programming-language/index.tsx:381:32)
    at MyApp (webpack-internal:///./pages/_app.tsx:19:18)
    at StyleRegistry (/home/chris/Development/highestpayingjobs.co.uk/www/node_modules/styled-jsx/dist/index/index.js:449:36)
    at ek (/home/chris/Development/highestpayingjobs.co.uk/www/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:30:13126)
    at eY (/home/chris/Development/highestpayingjobs.co.uk/www/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:1766)
    at eV (/home/chris/Development/highestpayingjobs.co.uk/www/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:3110)
    at div
    at e1 (/home/chris/Development/highestpayingjobs.co.uk/www/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:48:761)
Code language: JavaScript (javascript)

It doesn’t massively impact what I am covering here by showing you the output, but here’s the rough draft of what this component is showing on the page:

The gist of this is to have three radio buttons in a group that either include, exclude, or only show the programming languages that do not have any jobs.

You can visit that page and have a look, if you see fit.

Here’s the code I had – note that this contains the problem:

function ProgrammingLanguagesTableNoResultsDisplayCheckboxes({
  noResultsDisplay,
  dispatch,
}: ProgrammingLanguagesTableNoResultsDisplayCheckboxesProps) {
  return (
    <fieldset className="py-8">
      <legend>Programming Languages with no jobs:</legend>
      <div>
        <input
          type="radio"
          id="show"
          name="noResultsDisplay"
          value="show"
          checked={noResultsDisplay === "show"}
          className="h-4 w-4 border-gray-300 focus:none "
          onClick={() =>
            dispatch({
              type: "setNoResultsDisplay",
              noResultsDisplay: "show",
            })
          }
        />
        <label htmlFor="show" className="pl-2 ">
          show
        </label>
      </div>
      <div>
        <input
          type="radio"
          id="hide"
          name="noResultsDisplay"
          value="hide"
          checked={noResultsDisplay === "hide"}
          className="h-4 w-4 border-gray-300 focus:none"
          onClick={() =>
            dispatch({
              type: "setNoResultsDisplay",
              noResultsDisplay: "hide",
            })
          }
        />
        <label htmlFor="hide" className="pl-2 ">
          hide
        </label>
      </div>
      <div>
        <input
          type="radio"
          id="only"
          name="noResultsDisplay"
          value="only"
          checked={noResultsDisplay === "only"}
          className="h-4 w-4 border-gray-300 focus:none"
          onClick={() =>
            dispatch({
              type: "setNoResultsDisplay",
              noResultsDisplay: "only",
            })
          }
        />
        <label htmlFor="only" className="pl-2 ">
          only
        </label>
      </div>
    </fieldset>
  );
}
Code language: TypeScript (typescript)

I’ve intentionally highlighted the lines above as the fix is basically that I’ve used the wrong event handler here. Everything you need to know is in the error message:

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`.Code language: JavaScript (javascript)

If it’s not jumping out at you now, let me drill it down to the most important bit:

<strong>Otherwise, set either `onChange`</strong> or `readOnly`.Code language: HTML, XML (xml)

Whoops.

        <input
          type="radio"
          id="show"
          name="noResultsDisplay"
          value="show"
          checked={noResultsDisplay === "show"}
          className="h-4 w-4 border-gray-300 focus:none "
          onChange={() =>
            dispatch({
              type: "setNoResultsDisplay",
              noResultsDisplay: "show",
            })
          }
        />
Code language: TypeScript (typescript)

And that should do it.

😳😳😳