Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Switch component is not working after switching from Checkbox

I was using Ant Design Checkbox earlier to check and publish the comments and it was working fine with no errors.

<Checkbox
  key={record.id}
  checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false}
  onChange={(e) => Update(e.target.checked, record)}
/> 

I want to use Switch instead.

<Switch
  key={record.id}
  checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false}
  onChange={(e) => Update(e.target.checked, record)}
/> 

I am getting error:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

cannot read properties of undefined (reading ‘checked)

I want Switch to work.

>Solution :

The onChange prop callback for the Switch component takes two arguments. The first is the current checked value and the second is the onChange event object.

See the Switch component API:

Property Description Type
onChange Trigger when the checked state is changing function(checked: boolean, event: Event)

Compared to the CheckBox component API:

Property Description Type
onChange The callback function that is triggered when the state changes (e: CheckboxChangeEvent) => void

Update to use the first argument, checked:

<Switch
  key={record.id}
  checked={Publish[record?.id]?.ispublish == 'true'}
  onChange={(checked) => Update(checked, record)}
/>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading