title: React Rich Text Editor - Clear state on ENTER
body: <p>I would like to clear the state of the React Rich Text Editor (<a href="https://github.com/sstur/react-rte" rel="nofollow noreferrer">https://github.com/sstur/react-rte</a>) when pressing the enter-key. </p>
  
  <p>My state looks like this:</p>
  
  <pre><code>state = {
      value: RichTextEditor.createEmptyValue()
  }
  </code></pre>
  
  <p>The <code>RichTextEditor</code>component offers to provide the handleReturn prop. Thus, I have implemented the following <code>handleReturn</code> function:</p>
  
  <pre><code>handleReturn = () =&gt; {this.setState(prevState =&gt; ({
        ...prevState,
        value: RichTextEditor.createValueFromString("", "html")
      }));
  }
  </code></pre>
  
  <p>When I trigger the handleReturn function from a button outside the RichTextEditor itself, it works perfectly and the state (and text input area) is properly cleared. However, when the same handleReturn is triggered from the enter-key it is not clearing the state; but I can see that the handleReturn function is correctly triggered. I pass the function in to the component like this:</p>
  
  <pre><code>&lt;RichTextEditor handleReturn={this.handleReturn} value={this.state.value}
            onChange={this.onChange}/&gt;
  </code></pre>
  
  <p>Any help is appreciated. Thanks!</p>
  
  <p>UPDATE: I ended up implementing the underlying <code>draft.js</code> library (<a href="https://draftjs.org/" rel="nofollow noreferrer">https://draftjs.org/</a>) directly instead. Was a pretty smooth process and it resolved this issue, by bypassing the use of <code>react-rte</code>. So would recommend switching if you have the possibility.</p>