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
});
};
Anyone kindly help me for sorting this out.
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("");
};