import React, { useState, useCallback } from "react";
import { JSXRenderer } from "react-jsx-renderer";
import marked from "marked";

export const Viewer: React.VFC<{
  text: string;
}> = ({ text }) => (
  <div>
    <JSXRenderer code={marked(text)} />
  </div>
);

export const Editor: React.VFC<{
  text: string;
  setter: React.Dispatch<React.SetStateAction<string>>;
}> = ({ text, setter }) => {
  const onTextareaChange = useCallback(
    (e: React.ChangeEvent<HTMLTextAreaElement>) => setter(e.target.value),
    [text]
  );

  return (
    <div>
      <textarea cols={80} rows={20} value={text} onChange={onTextareaChange} />
    </div>
  );
};

export const App: React.VFC = () => {
  const [text, setText] = useState("");
  const [editor, openEditor] = useState(false);

  const onModeChangeClick = useCallback(() => {
    openEditor(!editor);
  }, [editor]);

  return (
    <div>
      <h1>Marked + React JSX Renderer Example</h1>
      <button onClick={onModeChangeClick}>
        {editor ? "Close Editor" : "Open Editor"}
      </button>
      {editor ? <Editor text={text} setter={setText} /> : <></>}
      <Viewer text={text} />
    </div>
  );
};


import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App />, document.body);


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>