React-editor-js not showing up in a functional component

Question

I want to create text editor in React.js app, using react-editor-js. However I cannot get this module working on a functional component. My code roughly looks like this:

import { createReactEditorJS } from "react-editor-js";
import { EDITOR_JS_TOOLS } from "./EditorConstants";

const ReactEditorJS = createReactEditorJS();

const CreateNewPost = () => {
    const { t } = useTranslation();
    const [editorValue, setEditorValue] = useState({
        time: new Date().getTime(),
        blocks: [
            {
                type: "header",
                data: {
                    text: "Testing title",
                    level: 2
                }
            },
            {
                type: "paragraph",
                data: {
                    text:
                        "We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make it's core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏"
                }
            },

        ],
        version: "2.1.0"
    });

    return (
        <div className={style.wrapper}>
            <div className={style.container}>

                {/*TITLE*/}
                <div className={style.titleContainer}>
                    <label>{t("post.postTitle")}</label>
                    <input type="text"/>
                </div>

                <div>
                    <ReactEditorJS
                        tools={EDITOR_JS_TOOLS}
                        data={editorValue}
                    />
                </div>

            </div>
        </div>
    )
}

export default CreateNewPost;

The result - there is no any editor on the page. How to make it working?

This example uses class component and editor is working. While the same will not work on a functional component.

Nish · Accepted Answer · 2022-10-12 21:02:18Z

4

For anyone experiencing similar issue where Editor JS content is rendered empty, disabling strict mode works. Remove React.StrictMode enclosure tags from App.jsx or App.tsx file.

//From this

root.render(
  <React.StrictMode>
    <BrowserRouter basename='admin'>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

//Change to this

root.render(
    <BrowserRouter basename='admin'>
      <App />
    </BrowserRouter>
);

answered Oct 12, 2022 at 21:02

Nish

1,1374 gold badges17 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alper Over a year ago

I don't think that should be the solution. Your root cause of the problem here is the regulations in react 18. the react wrapper around editorjs github.com/Jungwoo-An/react-editor-js that you used is not working very well in react 18. see the issues in github: github.com/Jungwoo-An/react-editor-js/issues/228. I am not sure why this is happening but the library is not getting any new commits almost a year.

juicy-g · Accepted Answer · 2022-07-07 11:07:13Z

0

Your code should work, something outside of it or the way you are rendering the component is probably the issue.

Here's a working example using a functional component:

CreateNewPost.js

import { useState } from "react";
import { createReactEditorJS } from "react-editor-js";
import { EDITOR_JS_TOOLS } from "./constants";

const ReactEditorJS = createReactEditorJS();

const CreateNewPost = () => {
  const [editorValue, setEditorValue] = useState({
    time: new Date().getTime(),
    blocks: [
      {
        type: "header",
        data: {
          text: "Testing title",
          level: 2
        }
      },
      {
        type: "paragraph",
        data: {
          text:
            "We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make it's core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏"
        }
      }
    ],
    version: "2.1.0"
  });

  return <ReactEditorJS tools={EDITOR_JS_TOOLS} data={editorValue} />;
};

export default CreateNewPost;

index.js

import React from "react";
import { createRoot } from "react-dom/client";
import CreateNewPost from "./CreateNewPost";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<CreateNewPost />);

edited Jul 7, 2022 at 11:07

answered Jul 6, 2022 at 22:26

juicy-g

4881 gold badge4 silver badges9 bronze badges

3 Comments

A. Aziz Over a year ago

This works, but in this way i cannot export the componenet and have to put the code for the editor inside index.js .

juicy-g Over a year ago

@A.Aziz Example updated to show how you can export the component.

Shahriar Rahman Zahin Over a year ago

How do I get the value OnChange?

Collectives™ on Stack Overflow

React-editor-js not showing up in a functional component

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related