Could really use some help with the "Markdown Previewer" Challenge (Front End Libraries Project #2)

Hi everyone.
This is the challenge’s user story.
This is a pen example.

I got as far as setting up React and importing the marked library.
I’m just not sure how to put these together.
Intuitively, I tried something like the following simplified code:

class MyComponent extends React.Component {
  constructor(props) {
    this.state = { 
      input: ''
  render() {
    let title = marked('# Title');
    return (
ReactDOM.render(<MyComponent />,

But this does not work. Instead of seeing a “Title” stylized as h1, what is displayed in the browser is simply the string: <h1 id="title">Title</h1>.

There are many examples of successful pens of this challenge, but the code is always too advanced for me to understand what’s going on.

So I’ve been stuck for a while…

Can someone help me out, or perhaps refer me to some relevant explanation or beginners-friendly documentation?

Thanks and happy holidays! (:slight_smile:

you can use the renderer that markdown offers. and also you should use the
dangerouslySetInnerHTML property. see here for more details:

I suggest to pass the values for markdown to another component via props

For example (see component below):

const text = `# Title`
 <Preview markdown={text} />

“Preview” Component:

import React from "react";

import marked from "marked";

export const renderer = new marked.Renderer();

const Preview = props => {
  return (
        __html: marked(props.markdown, { renderer: renderer })

export default Preview;