EditorJS always renders two editors

user_8993253 0
Viewed 656

I am trying to use the Editor of EditorJS. Everything works fine, except that when I first load the page it initializes two editors at the beginning and keeps appending new editors everytime I reload the page. But they are all inside the <div id='editorjs' /> div. Is there something I am missing?

// react etc. imports
import EditorJS from '@editorjs/editorjs'

const EditorComponent = (props) => {
    const [input, setInput] = useState({})
    const currentuser = useSelector((state) => state.currentuser)

    const editor = new EditorJS({
        holderId: 'editorjs',
        autofocus: true,
    })

    const postNews = () => {
        // POSTING SUTFF
    }

    return (
        <Grid>
            <Grid templateRows='auto min-content' gap={6}>
                <div id='editorjs' />
                <Button onClick={postNews}>Post news</Button>
            </Grid>
        </Grid>
    )
}

Two editors

Here is a screenshot from the dom where two editors are added immediately after loading the page.

editorjs reactjs javascript
1 Answers

Found a simple solution

const <Your Component Name> = () => {
const [editor, setEditor] = useState("");

useEffect(() => {
  setEditor(() => new EditorJS(PostEditorConfig()));
  }, []);


// .... other components
return (
<div id=editorjs></div>
)}
user_151634310
Related