title: How to set the internal state to an empty string when using mui-rte for a chat message input
body: <p>I am using mui-rte, which is a nice Material-ui wrapper around draftjs:</p>
  
  <p><a href="https://github.com/niuware/mui-rte.git" rel="nofollow noreferrer">https://github.com/niuware/mui-rte.git</a></p>
  
  <p>I want to use MUIRichTextEditor for the input field for a web chat client. I have hit a roadblock on how to set the internal state to an empty string after hitting the send button. The RTE editor component looks like this:</p>
  
  <pre><code>import React, {useState, useEffect} from "react";
  import MUIRichTextEditor from "mui-rte";
  import {convertToRaw, EditorState} from 'draft-js'
  import {stateFromMarkdown} from "draft-js-import-markdown";
  import { ThemeProvider } from '@material-ui/styles';
  import { createMuiTheme, useTheme} from '@material-ui/core/styles';
  
  const local_theme_overrides = {
      overrides: {
          MUIRichTextEditor: {
              root: {
                  marginTop: 20,
                  width: "80%"
              },
              editor: {
                  border: "1px solid gray",
                  borderRadius: 4
              }
          }
      }
  };
  
  export default function RichTextEditor(props)
  {
      const { initialValue, onChange, ...rest } = props;
      const [initial, setInitial] = useState('');
  
      useEffect(() =&gt; {
          const init_state = EditorState.createWithContent(stateFromMarkdown(initialValue));
          setInitial(JSON.stringify(convertToRaw(init_state.getCurrentContent())));
          onChange(init_state);
      }, []);
  
      const theme = useTheme();
      const [localTheme, setLocalTheme] = useState(theme);
  
      useEffect(() =&gt; {
          setLocalTheme(Object.assign({...theme}, local_theme_overrides));
      }, []);
  
      return (
          &lt;ThemeProvider theme={localTheme}&gt;
              &lt;MUIRichTextEditor
                  onChange={onChange}
                  value={initial}
                  {...rest}
              &gt;
              &lt;/MUIRichTextEditor&gt;
          &lt;/ThemeProvider&gt;
      );
  }
  </code></pre>
  
  <p>The parent uses the field like this:</p>
  
  <pre><code>const [message_content, setMessageContent] = useState('');
  
  function sendMessage() {
      if (message_content === '')
          return;
      let rte_markdown = stateToMarkdown(message_content.getCurrentContent());
      channel.sendMessage(rte_markdown);
      // I would like to reset or re-render the mui-tre component after sending the message
      //setMessageContent('');
  }
  
  .....
  &lt;RichTextEditor
      label={"Write a message to " + name}
      initialValue={''}
      onChange={data =&gt; setMessageContent(data)}
      placeholder={"Write a message to " + name}
      controls={[]}
  /&gt;
  
  &lt;Button
          autoFocus
          onClick={() =&gt; sendMessage()}
          disabled={message_content === ''}
  &gt;
       Send
  &lt;/Button&gt;
  </code></pre>
  
  <p>When the sent button is pressed the message gets deliver to the chat channel but I am falling short of being able to re-set or force re-render of the RTE component. Any ideas on how to do that?</p>