Markdown Previewer React fails test #4

JavaScript
1

Hi Campers!

My markdown previewer pass all tests except user story#4:
When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (HINT: You don’t need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked).

I just cant figure it out. Help is much appreciated :slightly_smiling_face:

The error I get:

#preview’s only children should be those rendered by marked.js : expected '<div></div>'to equal ‘’

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      input : placeHolderr
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){

    this.setState({input : e.target.value})
  };



  render(){ 

    return (
      <div className="App">
        <header>Github flavoured Markdown Editor</header>
        <form className="window">
          <div id="input_container">
          <textarea onChange={this.handleChange} id="editor" value={this.state.input}>
          </textarea>
          </div>
          </form>
        
        <div id="preview" className="window">
          <Preview output={this.state.input}/>
        </div>
      </div>
    );
  };
}

const placeHolderr =`
# H1 heading  
## H2 heading
**Written in Markdown**  
>This here is a block quote!  
1. list item
2. list item
- list item  
- list item  

\`<div>inline code</div>\`   

    <body>  
      <p>block code</p>  
    </body>  

Basic syntax for [Markdown](https://www.markdownguide.org/basic-syntax).  

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.SdH34MSYlnWw9cY7ZajgWAAAAA%26pid%3DApi&f=1)`

export default App;

import React from "react"

function Preview(props){


	return <div dangerouslySetInnerHTML={{ __html: window.marked(props.output,
	 			{breaks: true, gfm: true}) }} />
	 		
}

export default Preview
2

You should assign id="preview" to the root div of Preview.

3

Much appreciated, solved the issue with your advice.