1

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.

mitu1234
  • 135
  • 6

1 Answers1

1
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("");
};
Rajesh Senapati
  • 201
  • 1
  • 8
  • 1
    thanks for the answer. Can you tell why using state value setContent, does not reflecting the editor – mitu1234 Jan 24 '23 at 12:51
  • 1
    The state value is not being passed correctly to the editor: Make sure the state value is being passed correctly to the editor, and that the editor is configured to update its content when the state value changes. – Rajesh Senapati Jan 24 '23 at 13:00