Markdown Previewer Help: I keep getting "#preview's only children should be those rendered by marked.js" error

1

My code is set up as below in VS Code and I can’t figure out why the error keeps popping up when I ran the script to test for the project.

This is the error: "#preview’s only children should be those rendered by marked.js"

Thanks much in advance! :slight_smile:

let marked = require('marked');

marked.setOptions ({
  breaks: true,
})

class App extends Component {
  constructor() {
    super()
    this.state = {
      inputWords: '',
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({
      inputWords: e.target.value
    })
  }


  render() {
    let {inputWords} = this.state;
    let outputWords = inputWords != '' ? inputWords : placeholder
    return (
      <div >
        <form>
          <textarea 
          type='text'
          id = 'editor'
          placeholder= {placeholder}
          rows = '20'
          cols = '200'
          onChange={this.handleChange} 
          >
          {inputWords != '' ? inputWords : placeholder}
          </textarea>
          </form>
          <div
            id = 'preview' 
            dangerouslySetInnerHTML = {{__html: marked(outputWords)}}>
            </div>
        </div>
    );
  }
}