I am using react functional component to use react draft wysiwyg. The problem is I am not able to define the default value of my editor. I have a product.description property in my database where all my editor content is saved.

My state

import { Editor } from "react-draft-wysiwyg";
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

State:
 const [onEditorStateChange, setOnEditorStateChange] = useState<any>()
 const [content, setContent] = useState<any>()

Editor code:

products.map(product =>{
 <div>
 <label className="block text-sm font-medium text-gray-700 mb-3"> Description </label>
 <Editor
     editorState={onEditorStateChange}
     toolbarClassName="toolbarClassName"
     wrapperClassName="wrapperClassName"
     editorClassName="editorClassName"

     onEditorStateChange={newState => {
         setOnEditorStateChange(newState)
         setContent(draftToHtml(convertToRaw(newState.getCurrentContent())))
     }}
 />
 
</div>
})

I found this code but it is a class component:

import React, { Component } from 'react'
import { EditorState, ContentState, convertFromHTML } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'

class MyEditor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editorState: EditorState.createWithContent(
        ContentState.createFromBlockArray(
          convertFromHTML('<p>My initial content.</p>')
        )
      ),
    }
  }

  render() {
    return <Editor editorState={this.state.editorState} />
  }
}

export default MyEditor