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

avatar

Borislav Hadzhiev

Wed Apr 06 20222 min read

banner

Photo by Ke Atlas

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
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
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
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
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
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.

Use the search field on my Home Page to filter through my more than 1,000 articles.