Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Checkbox example won't work in JS without onChange prop passed to <Slate />

See original GitHub issue

https://github.com/ianstormtaylor/slate/blob/5160efeea492fa52c462e0a9f14189b5dc18c48e/site/examples/check-lists.tsx#L76

This checkbox example was not working for me, with error slate.tsx:51 Uncaught (in promise) TypeError: onChange is not a function thrown when trying to delete any text (not thrown on adding new text).

Adding in an onChange prop to the <Slate/> component fixed the issue, with everything now working as expected. I just passed in a trivial {()=>{}} function.

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

BitPhinixcommented, Apr 18, 2022

This is expected as the onChange prop was made optional in slate-react 0.76.1 (https://github.com/ianstormtaylor/slate/releases/tag/slate-react%400.76.1). So you’ll either have to update slate and slate-react or pass an onChange prop.

0reactions

pbenmoser4commented, Apr 28, 2022

Thanks @BitPhinix. Closing this issue.

Top Results From Across the Web

Input check box not reacting to onChange function

In my example snippet I simply pass an empty string as the label. When removing that property the switch doesn't show. – 3limin4t0r....

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

The error "You provided a checked prop to a form field without an onChange handler" occurs when we set a checked prop on...

Adding Event Handlers - Slate

Just like other React components you're used to, Slate allows you to pass in handlers that are triggered on certain events. You've already...

@jeremyling/react-material-ui-form-builder - npm

Checkbox ; Radio; Switch; ImageList; Rating. Validation is done using yup. This project aims to make building standard forms a breeze while leveraging...

How To Use React Checkbox onChange Feature (with Code ...

*/ import React, {useState} from 'react'; function Checkbox() { const [checked, setChecked] = useState(false); const handleChange = () => { setChecked(!checked) ...