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

JavaScript
1

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) {
    super(props);
    this.state = { 
      input: ''
  }
}
  render() {
    let title = marked('# Title');
    return (
      <div>
       {title}   
      </div>
    )
  }
};
ReactDOM.render(<MyComponent />,
  document.getElementById('react_div'));

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:

2

you can use the renderer that markdown offers. and also you should use the
dangerouslySetInnerHTML property. see here for more details: https://reactjs.org/docs/dom-elements.html

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 (
    <div
      id="preview"
      dangerouslySetInnerHTML={{
        __html: marked(props.markdown, { renderer: renderer })
      }}
    />
  );
};

export default Preview;