My React Markup Preview Tool

#1

I felt like I understood the exercises really well, but I am absolutely turfing it when it comes to building something myself. As soon as I add anything dynamic into a component, the whole thing goes white. Please help!

localStorage.setItem('project', 'Markdown Previewer');

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      markdown: placeholder
    }
    this.onHandle = this.onHandle.bind(this);
  }
  onHandle = (e) => {
    this.setState( () => {
      markdown: e.target.value
    })
  }
  render() {
    const render = new marked.Renderer();

    return (
      <div>
      <h1>Markdown Preview Tool</h1>
       <Editor onHandle={this.onHandle} markdown={this.state.markdown} />
       <Preview render={render} markdown={this.state.markdown} />
        </div>
      )
  }
};

const Editor = (props) => {
      return(
        <div class="left">
      <textarea id="editor" onChange={props.onHandle}
      value={props.markdown}
      type="text" />
          </div>
    )
}

const Preview = (props) => {
      return(
      <div class="right">
          <div id="preview">{props.markdown}</div>
          </div>
    )
}

const placeholder = 
`When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
`

ReactDOM.render(
  <App />,
  document.getElementById('example')
);
#2

have you tried setState not as a function? this.setState({markdown: e.target.value});

#3