Why do I get a blank page when I click on my textarea zone with react-wysiwyg?

user_14430938 0
Viewed 330

After getting the API response inside MenuItemDetail, I set it to the responses state, which is then passed down to Tabs, then TabContent. Here, I want to read correctly its resp and name props then display whatever they contain in the two corresponding editors i.e respEditor and nameEditor (resp and name fields in my json from API).

I can retrieve my resp and name from my API, but when I try to click on the textarea zone in order to add or modify the content I got a blank page, and get this error in the console:

Uncaught TypeError: contentState.getBlockMap is not a function

i've check this question on the forum : DraftJS - contentState.getBlockMap is not a function

I really really don't know why

const TabContent = ({  onChange, resp, , status }) => {
  const [respEditor, setRespEditor] = useState(
    EditorState.createWithContent(convertFromHTML(resp !== null ? resp : ""))
  );

  function respChange(state) {
    setRespEditor(state);
    onChange({
      resp: convertToRaw(state.getCurrentContent()),
      status
    });
  }



  let handle = async (e) => {
    e.preventDefault();
    try {
      let res = await fetch("", {
        method: "POST",
        body: JSON.stringify({
          resp: convertToHTML(respEditor.getCurrentContent()),             
          status: status
        })
      });
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <form onSubmit={handle}>        
      <Editor
        editorState={respEditor}
        onEditorStateChange={respChange}
        wrapperclassName="wrapperclassName"
        editorclassName="editorclassName"
        toolbar={{
          options: ["inline"],
          inline: { inDropdown: false }
        }}
      />

      
          <input
            type="radio"
            value="B"
            onChange={(e) =>
              onChange({
                resp,
                status: e.target.value
              })
            }          
          <input
         
        </span>
      </div>

    
    </form>
  );
};

Here is my json from api for menuId:1:

[
  {
    "menuId": 1,
    "name": "Menu1", 
    "trust":1,   
    "dishes": {
      "meat": "N/A",
      "vegetables": "pea"
    },
    "list": [
      {
        "resp": "resp1",
        "question": "question1",
        "link": "",
        "name": "Name1",
        "status": "Finished"
      },
      {
        "resp": "resp2",
        "question": "question2",
        "link": "http://mylink.com",
        "name": "Name2",
        "status": "Saved"
      }
    ]
  }
]
react-draft-wysiwyg react-hooks reactjs html javascript
1 Answers

Solution Codesanbox: https://codesandbox.io/s/react-wysiwyg-draft-js-ecmpth?file=/src/TabContent.js

Edited

You can use convertFromHTML from draft-convert to parse HTML string to EditorContent. Install draft-convert, which is the recommended way in the official example. (reference: https://stackoverflow.com/a/36904924/9744063)

npm install draft-convert

import { convertFromHTML } from ‘draft-convert’;

const [respState, setRespState] = useState(EditorState.createWithContent(convertFromHTML(resp)));
const [nameState, setNameState] = useState(EditorState.createWithContent(convertFromHTML(name)));
user_97440630
Related