TypeError: editorState.getCurrentContent is not a function while using Draft.js Editor

Question

I am trying to add react-draft-wysiwyg editor. I am trying to get the current content of the editor but it's showing error as getCurrentContent() is not a function. Can anyone help please?

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";
import { convertToHTML } from 'draft-convert';
import DOMPurify from 'dompurify';


const NoteEditor = () => {

    const [editorState, setEditorState] = useState(
        () => EditorState.createEmpty(),
    );
    const [convertedContent, setConvertedContent] = useState("");

    const handleEditorChange = (state) => {
        setEditorState(state);
        convertContentToHTML();
      }
    const convertContentToHTML = () => {
        let currentContentAsHTML = convertToHTML(editorState.getCurrentContent());
        setConvertedContent(currentContentAsHTML);
    }
    const createMarkup = (html) => {
        return  {
          __html: DOMPurify.sanitize(html)
        }
      }
      
    return(
        <div className="note-editor">
            <Editor 
                defaultEditorState={editorState}
                onChange={handleEditorChange}
                wrapperClassName="wrapper-class"
                editorClassName="editor-class"
                toolbarClassName="toolbar-class"
            />
            <div className="preview" dangerouslySetInnerHTML={createMarkup(convertedContent)}></div>
        </div>
    )
};

export default NoteEditor;

did you find why is this and did you manage to solve it?

VLazzarova
– VLazzarova

2021-10-13 13:21:37 +00:00
Commented Oct 13, 2021 at 13:21 — VLazzarova
– VLazzarova, Commented Oct 13, 2021 at 13:21

Ashish Kamble · Accepted Answer · 2021-08-17 04:47:01Z

1

you can use like this, sometime useState took time as its async,

const handleEditorChange = (state) => {
    setEditorState(state);
    convertContentToHTML(state);
  }
const convertContentToHTML = (editorState) => {
    let currentContentAsHTML = convertToHTML(editorState.getCurrentContent());
    setConvertedContent(currentContentAsHTML);
}

or do useEffect with editorState,

useEffect(()=>{},[editorState])

answered Aug 17, 2021 at 4:47

Ashish Kamble

2,8254 gold badges23 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

TypeError: editorState.getCurrentContent is not a function while using Draft.js Editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related