Borislav Hadzhiev
Wed Apr 06 2022·2 min read
Photo by Ke Atlas
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.
Here is an example of how the error occurs.
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.
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.
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.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.
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
.
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.
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
.