Markdown previewer help

1

Hello,

I am working on the markdown viewer project and have come across a problem. I can type into my Markdown box but nothing shows up in the previewer. If someone could look through my code and let me know if they see an issue that would be much appreciated.

Thanks,
Ty

https://codepen.io/Twilson23/pen/xWNggd?editors=0010

2

I am writing this as I review your pen (I am also working on this project now). FIrst this I noticed is “div-itis,” which often happens with bootstrap. Based your html and ReactDOM.render method, your HTML structure looks like this:
body
.container
.render-target
.row //first div that matters, could be rendered straight to the body.

  1. I’d erase everything in your HTML pane, and just change your ReactDom method to:
    ReactDOM.render(\<App />, document.body);

  2. You also forgot to bind the handleChange() method to this. Click to reveal the code only if you don’t know how to do this

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

  1. It may not be strictly necessary, but you’re missing a semicolon after your class declaration. (the line above your ReactDOM.render call).

  2. The onchange/onChange event handler will automatically feed your handleChange() event handler the event parameter. What you have, onChange={() => this.handleChange(event)} is maybe defining a new ES6 arrow function which returns an event call (I’m no JS wizard, but the correct/simpler syntax is):
    onChange={this.handleChange}, which sets the event handler to handleChange(), which the textarea element will pass a change event.

  3. You should probably refactor the textarea style declaration style={{ width: "300" }} to the CSS file.

  4. As I said, I’m a hair’s breadth away from finishing this project myself, but I’ve been told it is correct to use dangerouslySetInnerHTML, and your syntax looks correct.