I have a react form that gets the status of a checkbox element from local storage with useEffect.
const [checkbox, setCheckbox] = useState(false);
useEffect(() => {
setCheckbox(localStorage.getItem('Checkbox Value'))
},[]);
The JSX is
<div className="ui checkbox">
<input type="checkbox" onChange={handleCheckboxChange} checked={checkbox}</input>
<label>I agree to the Terms and Conditions: {checkbox}</label>
</div>
When the form renders the correct value (true, false) displays in the label but the checkbox renders checked no matter what the value Not sure what I am missing...
localStorage always returns strings, and since "false" (string) is a truthy value, your checkbox will be always checked.
Change your code to be:
useEffect(() => {
setCheckbox(JSON.parse(localStorage.getItem('Checkbox Value') || 'false'))
},[]);