Markdown Previewer User Story 4 Failing but Text DOES update

JavaScript
1

Tell us what’s happening:

This is making me absolutely nuts. I can see the markdown I type into the text area being rendered into HTML in the “preview” before my eyes, yet I’m still not passing User Story 4.

My first thought was that maybe what I need is for different parts to update at different times using lifecycle methods, but when I try to switch from "var [element] = createclass to “class [name] extends React.component” it just makes everything go blank.
Your code so far


marked.setOptions({
        gfm: true,
        tables: true,
        breaks: true,
        pedantic: false,
        sanitize: true,
        smartLists: true,
        smartypants: true
    });
var UserInput = React.createClass({
  handleText: function(event){
   var input = event.target.value;
    this.props.onChange(input);
  },
  render: function(){
  return(
    <div>
  <h2>User Input</h2>
    <textarea id = "editor" value = {this.props.value} onChange = {this.handleText} />
      </div>
  );
}
});

var App = React.createClass({
  getInitialState: function(){
    return {
      userContent: "# Heading" + "\n \n## Subheading" + "\n [outofsystemtransfer](/https://outofsystemtransfer.bandcamp.com/ 'out of system transfer')" + "\n \n in-line code: `code`\n \n" + "\n \n " + "\n \n block-code: \n ``` \n code \n ``` \n" + "\n \n List: \n - foo \n - bar \n - baz" + "\n > # This Is A Blockquote \n > \"Quotey quotey quote\" \n \n > -Albert Einsein, probably" + "\n \n**Bold as Love**" + "\n \n![React Logo w/ Text](https://goo.gl/Umyytc)"  
    }
  },
  
  updateContent: function(input){
    this.value = input;
    this.setState({
      userContent: input
    })
  },
  markdown: function(userInput){
    var markedText = marked(userInput);
    return{
      __html: markedText
    }
  },
  render: function(){
    return(
      <div id = "outer">
        <h1>Markdown Previewer</h1>
        <div id = "viewer">
    <div id = "childComponent">
        <UserInput value = {this.state.userContent} onChange = {this.updateContent}/>
        </div>
        <div id = "newComponent">
        <h2>Markdown:</h2>
          <div id = "preview"  dangerouslySetInnerHTML = {this.markdown(this.state.userContent)}></div>
          </div>
        </div>
      </div>
    );
  }
});

ReactDOM.render(, document.getElementById(“root”));
Your browser information:
Doing this all in Chrome, so browser shouldn’t be an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36.

Link to the challenge: