editor.save() is not a function in React functional component

Editorjs while imported in React functional component isn’t working when calling function to save data.

const editor = new EditorJs({
    holder:'editorjs',
    placeholder: 'Let`s write an awesome story!',
    tools: {
        header : {
            class: Header,
            inlineToolbar:true,
            shortcut:"CTRL+SHIFT+H",
            config: {
                placeholder:'Enter Your text'
            }
        }
    },
    data:{}
})

const output = document.getElementById('output')

function Save() {
    editor.save().then(data => {
        output.innerHTML = data
    })
}

export default function Editor() {
    
    return (
        <div>
            <h1>Create Your Post</h1>
            <div id="editorjs" style={{border:'1px solid #ddd', marginBottom:'1rem'}} mx={4}></div>
            <Button variant="contained" color="primary" onClick={Save()}>Save Me</Button>
            <code id="output"></code>
        </div>
    )
}

[mupkoo]

This React component does not look alright to me.

• You should initialise the Editor, after rendering your component.
• onClick={Save()} is calling Save on render, not on click

it is calling Save function which have saving code.

onClick={Save} will call Save on click, but onClick={Save()} is going to call Save on render and nothing on click as Save is not returning anything

[kenyxy]

I agreed with @mupkoo that your ‘const editor = new EditorJs({holder:‘editorjs’,…’ is executed before ‘<div id=“editorjs”…’ is rendered, so not such element with the id can provide EditorJs’s constructor.