TypeScript error with React & Slate: Property 'renderElement' does not exist on type 'IntrinsicAttributes'

Question

I am trying to learn how to use Slate vis-a-vis the following tutorial: Defining Custom Elements.

I have (following the tutorial with slight stylistic changes) added the following code:

export default function App() {
  const renderElement = useCallback((props) => {
    switch (props.element.type) {
      case "code":
        return <Code {...props} />
      default:
        return <Default {...props} />
    }
  }, [])

  return <Editor renderElement={renderElement} />
}

The problem is that I get the following TypeScript error:

Type '{ renderElement: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'renderElement' does not exist on type 'IntrinsicAttributes'. ts(2322)

Any idea why I am getting this error and how to fix it?

Answer 1

I'm not familiar with the library in question, but from the documentation you linked it looks like the renderElement prop is on the <Editable /> component rather than <Editor />. Could that be the problem?