Setcontents Suneditor Is Not Working React

I have been testing with SunEditor since I want to pre-load an HTML text stored in DB and let users modify it if necessary. I'm passing a ref variable from parent so when the submi

Solution 1:

I'm passing a ref variable from parent so when the submit button is clicked he could get the value and save modifications.

If all you need to access is the value, let's pass down a callback instead. We'll call it onSumbit and it will be a function which takes the string value from the SunEditor component.

In order to have access to the current edited value, I am using a local state in the TranslationArea component and updating that state through the editor's onChange method. Then when the submit button is clicked, I call onSubmit with the value of content from the local state. (There might be another way to do this but I'm not familiar with SunEditor).

The TranslationArea component looks like this:

exportconstTranslationArea = ({initialContent = "", title, onSubmit}) => {    
  const [content, setContent] = useState(initialContent);

  return(
      <div><h2>{title}</h2><SunEditorautoFocus={true}width="100%"height="150px"setOptions={{buttonList: [
                          // default
                          ['undo', 'redo'],
                          ['bold', 'underline', 'italic', 'list'],
                          ['table', 'link', 'image'],
                          ['fullScreen']
                      ]
                  
                  }}
                  setContents={initialContent}onChange={setContent}
              /><div>{content}</div><buttononClick={() => onSubmit(content)}>Submit</button></div>
  );
};

I tested it in my CodeSandbox by giving it an onSubmit function which logs the submitted content, but you can do whatever you need to with it.

exportdefaultfunctionApp() {
  const initialContent = "Hello World";
  constonSubmit = (content: string) => {
    console.log("Submitted Content", content);
  };

  return (
    <divclassName="App"><TranslationAreainitialContent={initialContent}onSubmit={onSubmit}title="Edit Text"
      /></div>
  );
}

CodeSandbox Link