Frontend Libraries Project 2 (Markdown Previewer)

I imported ‘Marked’ library in Codepen. I converted my normal ‘text’ to ‘markdown’ with ‘marked(text)’ function but I’m not able to use ‘dangerouslySetInnerHTML’ property on my Div element. I’m able to write normal text in ‘textarea’ and view it in ‘previewer’ div. But it’s failing to convert to Markdown. What am I doing wrong?

We’d really need to see the Codepen to be able to help diagnose the issue here

In the first image, I have simply set ‘value’ prop to ‘this.state.text’ in my ‘preview’ div. So all the text I type in my ‘editor’ textarea is previewed in ‘preview’ div.

In second image, I passed ‘text’ in my state to ‘marked()’ and stored the result in ‘markdown’ constant. When I set ‘markdown’ to ‘{__html: markdown}’ and set this object to ‘dangerouslySetInnerHTML’, then my code breaks.


A link to the code please, not tiny photos of a computer screen with a sliver of the code on.

Here it is…

1 Like

Look at the docs for markedjs you are not using the correct method (hint: should be using marked.parse())

1 Like