Wrapping in React Component

[on2air]

Attempting to wrap in a React component. I'm able to get it to display, although not perfectly. But then after a couple seconds it generates an error:
TypeError: Cannot read property 'ownerDocument' of undefined

Here is the code in the wrapper:

import React, {useRef} from 'react'
import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js'

const JSONEditorComponent = ( {} ) => {
    const editor = useRef(null)

    const onRef = ( ref ) => {
        if(ref) {
            console.log('ON REF', ref)
            editor.current = new JSONEditor({
                target: ref,
                props: {
                    json: {
                        greeting: 'Hello World'
                    },
                    onChange: (content) => {
                        // content is an object { json: JSON | undefined, text: string | undefined }
                        console.log('onChange', content)

                    }
                }
            })
        }
    }

    return (
        <div id="json-editor" ref={onRef}/>
    )
}

Any one more advanced with React able to get this working?

[josdejong]

I created a sandbox based on your code example, it all seems to work just fine:

https://codesandbox.io/s/svelte-jsoneditor-react-59wxz?file=/src/App.js

[on2air]

thank you @josdejong - your slight changes made a difference.
I've modified it to add the destroy on unmount fix for anyone looking in the future:

https://codesandbox.io/s/svelte-jsoneditor-react-forked-p48uq

[josdejong]

Ah, ok good to hear it works for you now! Thanks for sharing your updated sandbox.

[lsbyerley]

Is creating a ref necessary in the posted codesandbox examples when implementing this in react?

[josdejong]

Yes. Try to do it without a ref it and you'll find out very soon :)