[Bug] Double codex editor in Reactjs
See original GitHub issueI’am trying to setup editor.js
in my React app. But there is a weird situation in my project. Let me demonstrate:
There is second codex-editor
which is I don’t need it. Also the second codex-editor
is also main(?) editor. When I console output, it shows the second editor’s values:
My React app code:
import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import "./App.scss";
function App() {
const editor = new EditorJS({
/**
* Id of Element that should contain the Editor
*/
holder: "editorjs",
/**
* Available Tools list.
* Pass Tool's class or Settings object for each Tool you want to use
*/
tools: {
header: {
class: Header,
inlineToolbar: ["link"],
},
list: {
class: List,
inlineToolbar: true,
},
},
});
const onClickHandler = () => {
editor
.save()
.then((outputData) => {
console.log("Article data: ", outputData.blocks);
})
.catch((error) => {
console.log("Saving failed: ", error);
});
};
return (
<div className="App">
<div id="editorjs"></div>
<button onClick={onClickHandler}>Add</button>
</div>
);
}
export default App;
Issue Analytics
- State:
- Created a year ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Editor.js rendering/outputting two editors in React
I'm using Editor. js in React (Next. js) & have the original package, not the 3rd party wrappers for react. For a reason...
Read more >Most frustrating bug to debug? : r/reactjs - Reddit
Share your most frustrating bugs to debug you remember. Mine was fortunately super simple to fix, since it was amauter mistake.
Read more >Top 10 Best VS Code Extensions for React Developers 2022
These popular VS Code extensions apply to JavaScript and ReactJS developers, but there are some general-purpose VS Code extensions that will ...
Read more >Handling Multiple Checkboxes in React | CodeX - Medium
In React, while creating different forms, developers often have to deal with multiple checkboxes. In doing so, they may need to dynamically ...
Read more >Unit testing JavaScript and TypeScript - Visual Studio (Windows)
Some test frameworks may require additional npm packages for test detection. For example, jest requires the jest-editor-support npm package. If ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Only using useEffect doesn’t prevent from rendering twice. Using state to check editorjs instance exist was working for me though I’m not sure this is correct way. d
Hi, It is because of rendering component twice, to solve this problem, when you initilize the editor in useEffect, use empty braces [] as useEffect’s dependency, so anything in useEffect will render once per each component call. And in the useEffect, return a cleanup function which destroy the editor when component detaches from the dom.