React Draft Wysiwyg dropdown options not working

Question

I am facing issue when implementing React Draft Wysiwyg, font, size, bold and other dropdown options not working

this is my code

import React, { useState } from 'react'
import { Editor } from 'react-draft-wysiwyg'
import { EditorState } from 'draft-js'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'


export const HTMLEditor: React.FC = (): JSX.Element => {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty())


return (
    <div className="mt-2 mb-2">
      <Editor
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorState={editorState}
        onEditorStateChange={setEditorState}
        toolbar={{
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true },
        }}
      />
    </div>
  )
}

when I click on font or any other dropdown it show the error

Answer 1

Please try to wrap your setState function.

const onSetEditorState = (newState) => {
   setEditorState(newState)
}

then pass onSetEditorState as a prop to onEditorStateChange

Answer 2

I found solution from this old clip 2020. Thanks to him.

youtube: https://www.youtube.com/watch?v=t12a6z090AU&t=760s&ab_channel=CodingShiksha

repo github: https://github.com/gauti123456/ReactWysiwygEditor

Do This steps

1. Change code in src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

to

import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom";                 // add this

render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

I don't know what it means, but it didn't work if I don't do this step, anyone could explain. I will be really appreciated.

more infomation

So I try all day, all night to figure out what wrong with this editor that I can't press and it appear dropdown to me. So, the version of react and react-dom are not relate to this problem and CSS version too.

So, Happy coding!

Ps. Draft js will be archive in 31 Decembers 2022, and meta company will use lexical instead. So, keep that in mind. https://github.com/facebook/lexical

Ps2. For React Draft Wysiwyg is an extention of Draft js, it's very good but I see github has no more active for a very long time. So please consider if you will use this in long term.