The prop `checked` is marked as required in `ToggleSwitch`, but its value is `undefined`

Question

In my reactjs project, when I onchange the toggleswitch, I am getting the error as

Warning: Failed prop type: The prop `checked` is marked as required in `ToggleSwitch`, but its value is `undefined`.

I have an array which contains some values in which I need to map and to show the toggleswitch. my code is:

let [ischecked, setChecked] = useState({
        checkedA: true,
}); 

const handleSwitchChange = (event, func) => {
  setChecked(event);
};  

Object.keys(arr).map((key, val) => (
<ToggleSwitch
className='onFunc'
defaultChecked={ischecked.checkedA}
onChange={(e)=>handleSwitchChange(e,key)}
name={`fun[${key}]`}
id={`on_${key}`}
optionLabels={["On", "Off"]}
value={ischecked.checkedA === true ? 'y' : 'n'}
/>
))
</td>

console error

Pleas help. I don't know how to fix the issue.

I need to remove the console eror when i click on the toggleswitch.

Answer 1

This is happening because in your ToggleSwitch component you have this :

ToggleSwitch.propTypes = {
//...
  checked: PropTypes.boolean.isRequired
};

This means that your ToggleSwitch should recieve a property named checked.
so you have to pass it to the component :

<ToggleSwitch
//...
checked={value} 
/>

if you don't really need it to be required you can remove isRequired :

ToggleSwitch.propTypes = {
//...
  checked: PropTypes.boolean
};

so it will be optional