# Help with MarkdownPreviewer and 'dangerouslyInsertInnerHTML'

**URL:** <https://forum.freecodecamp.org/t/help-with-markdownpreviewer-and-dangerouslyinsertinnerhtml/393565>\
**Category:** General\
**Created:** [May 24, 2020, 4:06pm UTC](https://forum.freecodecamp.org/t/help-with-markdownpreviewer-and-dangerouslyinsertinnerhtml/393565 "2020-05-24T16:06:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rjpbs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rjpbs/32/134387_2.png) [@rjpbs](https://forum.freecodecamp.org/u/rjpbs)\
**Post date:** [May 24, 2020, 4:06pm UTC](https://forum.freecodecamp.org/t/help-with-markdownpreviewer-and-dangerouslyinsertinnerhtml/393565/1 "2020-05-24T16:06:37Z")

</div>

I think I am close to implementing the markdown preview project in react. I can console.log the markdown, but for some reason I get an error when trying to insert the HTML. Here is the code:

```auto
//import { useState } from 'react';
const {useState} = React

//MAIN APP
function App(){
  const [text, setText]=useState("Test")

  function editorHandler(event){
    setText(event.target.value)
  }

  return( 
  <div>
      <h1> MARKDOWN PREVIEWER </h1>
      <Editor onChange={editorHandler} markDown={text}/>
      <Preview previewText={text}/>
  </div>
  )
}

ReactDOM.render(<App/>, document.getElementById("App"))

// EDITOR COMPONENT
function Editor(props){
  return(
  <div className="window">
    <h2>editor</h2>
    <textarea id="editor" value={props.markDown} onChange={props.onChange} placeHolder="Write something here"> </textarea>
  </div>
  )
}

// PREVIEW COMPONENT
function Preview(props){

 console.log(marked(props.previewText)) // works, outputs: <p>Test</p>

  function getMarkDownText() {
    const rawMarkup = marked(props.previewText)
    return {__html: rawMarkup};
  } 

  return(
  <div className="window">
      <h2>previewer</h2>
      <div id="preview" dangerouslySetInnerHTML={getMarkDownText()}> </div>
    </div>
  )
}

```

The problem seems to be with that last div (id preview). I get the following error message which is not very helpful: “Uncaught Invariant Violation: Minified React error #60”

Codepen is here if easier: [https://codepen.io/rpollock03/pen/RwWvYQb?editors=1011](https://codepen.io/rpollock03/pen/RwWvYQb?editors=1011)

Grateful for an explanation of what I’m doing wrong. I am learning React so apologies if this is something silly! I’ve tried reading the docs - the marked.js ones weren’t very clear in my opinion.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:52pm UTC](https://forum.freecodecamp.org/t/help-with-markdownpreviewer-and-dangerouslyinsertinnerhtml/393565/2 "2021-06-01T18:52:16Z")

</div>

Closed on June 1, 2021, 6:52pm UTC