Not rendering to page?!?

JavaScript
#1

Tell us what’s happening:
My component will not render. I have React/ReactDOM linked and the appropriate HTML included. I believe I am using ReactDOM.render() correctly but nothing is happening to the preview in my code pen. I would like to get this to work before going much further into the project.

Your code so far

const markDown = `
### Headers

# Header 1
## Header 2
### Header 3
`;

class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      input: markDown,
    };
  };
  render(){
    return (
  <div>    
  <h1>Markdown Previewer</h1>
        <div className="container">
          <div className= 'left'>
            <textarea id='editor'></textarea>
        </div>
          <div className= "right">
            <div id='preview' dangerouslySetInnerHTML= {{__html: marked(this.state.markdown)}}></div>
            </div>
        </div>
    </div>      
    );
}
};

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36.

Challenge: Build a Markdown Previewer

Link to the challenge:

#2

In this case, if you post the link to the pen, it is easier to check

#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

#4

Thanks! Appreciate the tip

#5

https://codepen.io/bhintz/pen/ZEGayBg

I have linked React, ReactDOM, and Marked in the JS settings. Is this not how I do it with code pen?

#6

You have input: markDown in state but you are referencing it as this.state.markdown in the JSX. What is the correct property on the state object that you need to use?

#7

That’s it! Thanks! {this.state.input} did the trick. I’m off and rolling now. Thanks again!

#8