reactjsrich-text-editorsuneditor

suneditor-react textarea is not clearing out


I'm using suneditor-react for rich text editor. All its functionalities are working fine but now problem is after pressing submit button the text area should be empty.

While I do console.log, the content is showing empty, but it still appears on the text area.

View:

      <TextField id="title" label="Content title" name="title" value={contenttitle} onChange={(e) => setContenttitle(e.target.value)} autoComplete="title" margin="normal" required fullWidth autoFocus />
      <div>
        <SunEditor setOptions={editorOptions} width="100%" height="500px" setContent="" onChange={setContent} />
      </div>
      <Button onClick={handleSave} variant="contained" sx={{ mt: 3, mb: 2 }}>
        Save
      </Button>

Script:

const [contenttitle, setContenttitle] = useState("");
const [content, setContent] = useState("");

const handleSave = () => {
  console.log("save editor content: ", content);
  . . . .

  dispatch(updatemasteractivitiesThunk({ _id, body }))
    .then(() => showModal("info", "confirm", "Do you want to create another content?"))
    .then(() => {
      setContent("");  //<------- its working but not reflect on text area
      setContenttitle("");//<---- its working
    });
};

Screenshots: enter image description here

Console: enter image description here

Anyone kindly help me for sorting this out.


Solution

  • by using useRef, access the editor instance
    
    const editorRef = useRef(null);
    <SunEditor ref={editorRef} setOptions={editorOptions} width="100%" 
    height="500px" setContent={content} onChange={setContent} />
    
    then on button click call this function
    
    const clear = () => {
    // clear editor contents
    editorRef.current.editor.setContents("");
    };