Reputation: 1562
I have a SimpleMDE Text Editor component and I want to empty it when I submit the form.
Its state is empty but not de content of the text editor.
import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
function App() {
const [text, setText] = useState("");
const simplemdeOptions = {
spellChecker: false,
status: false,
minHeight: "50px"
};
const handleTextChange = (newText: String) => {
setText(newText);
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// send data to server ...
// fetch(...);
console.log("submitted :", text);
// empty the text editor
handleTextChange(""); // not working!
};
useEffect(() => {
// text is emptied on submit but not SimpleMDE content
console.log("useEffect text :", text);
}, [text]);
return (
<form onSubmit={handleSubmit}>
<SimpleMDE
value={text}
onChange={handleTextChange}
options={simplemdeOptions}
/>
<button type="submit">OK</button>
</form>
);
}
Here's the sandbox : https://codesandbox.io/s/simplemde-hooks-ukd8l
Upvotes: 1
Views: 295