Martial
Martial

Reputation: 1562

SimpleMDE component not emptied on submit

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

Answers (0)

Related Questions