html - Content entered in the CodeMirror editor is not rendering in a preview div correctly

Question

I have a codemirror component on my page which looks like:

<CodeMirror
        value={this.state.value}
        options={options}        
        onBeforeChange={(editor, data, value) => {          
          this.setState({value: value});
        }}
        onChange={(editor, data, value) => {
        }}
      />

I then have a button on the page, that when clicked, gets the state of the codemirror content and simply takes that value and updates my redux store. I then display the content inside of a div element like a preview of what was entered in the codemirror editor.

  updatePreview() {
    const { dispatch } = this.props;    
    console.log('calling updatePreview with value:' + this.state.value);
    dispatch(EditorActions.updatePreview(this.state.value));
  }

Preview is just getting the value from redux:

<div className="preview">
  <h2>Preview</h2>
  {editor.preview}
</div>

What I am seeing is, that if I enter HTML into the editor, it displays the HTML tags in the browser instead of the rendered element like a h1 or bold character.

Why isn't the HTML rendering correctly and it is showing the actual HTML tags instead?

标签： htmlreactjscodemirror