Cannot make markdown show up properly using Marked parser

Hi, I’m working on the Markdown Previewer project for the Front End Development Libraries course and am having trouble figuring out how you’re supposed to use the Marked library to actually display the output as anything but plaintext HTML.

I’ve read the Marked documentation and I’m sure I’ve missed something but I cannot for the life of me figure out what it is.

Here is what it’s doing currently

and here is my code so far

and specifically the wrapper function I’m using in my code to parse the markdown within the JSX

const convertToHTML = (text) => marked.parse(text);

Check out how to add innerHTML in React.

1 Like

Thanks! This fixed it for me, just had to add it as a prop and it started working. I saw the part of using

document.getElementById()

and wasn’t sure how to fit that into the React code, but this worked perfectly

<div id="preview" dangerouslySetInnerHTML={{__html: convertToHTML(text)}} />