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')
);