Issue with markdown previewer

[artbaker82]

Hello, I’m attempting to build the markdown previewer and having some issues getting the markdown rendering correctly in the preview window. At first, before researching and learning about using dangerouslySetInnerHTML , all input in the editor would render the literal html tags like this:

Here is the code from my Preview component in React:

let marked = require("marked");

class Preview extends Component {
  render() {
    return (
      <div>
        <div
          id="preview"
          value={this.props.value}
          //dangerouslySetInnerHTML={{ __html: marked(this.props.value) }}
        >
          {marked(this.props.value)}
        </div>
        <div />
      </div>
    );
  }
}

export default Preview;  

After doing some research, I figured all I need to do is properly set the html using dangerouslySetInnerHTML

class Preview extends Component {
  render() {
    return (
      <div>
        <div
          id="preview"
          value={this.props.value}
          dangerouslySetInnerHTML={{ __html: marked(this.props.value) }}
        ></div>
        <div />
      </div>
    );
  }
}

But I’m left with this as the result:

Here is a link to the project on GitHub: GitHub - artbaker82/markdown-previewer

I’ve been troubleshooting this for hours now and I have yet to come up with a solution. What is going on here?

[Sky020]

Hello there,

@artbaker82

<div
          id="preview"
          value={this.props.value}

What do you expect adding a value to a value attribute to do?

Here is some recommended reading:

• <div>: The Content Division element - HTML: HyperText Markup Language | MDN
• Global attributes - HTML: HyperText Markup Language | MDN

---

Also, would you mind sharing all of your code? Typically this is done by:

• CodePen
• GitHub
• JSFiddle

I cannot see in your code where you have defined what a this.props.value is…

Hope this helps

[artbaker82]

Here’s a link to the full project on GitHub:

artbaker82/markdown-previewer

And tbh I’m not quite sure where what value came from, I’ve since deleted it.

[artbaker82]

Ok lesson learned: Maybe it’s a good idea to study and learn the concept you’re trying to implement i.e markdown syntax

The issue is I was not leaving a space between the pound sign and the text, so the markdown parser was not recognizing it to be an h1 tag. Yet another moment of feeling very very silly in the process of learning to code.