Kreitzo Kreitzo - 3 months ago 23
HTML Question

React is rendering md (remarkable) as a string

Below is a dummied down version of the component I'm pulling into another component.

import React from "react"

var Remarkable = require('remarkable');
var md = new Remarkable();

const Info = (props) => {
return (
<div className="pop">
<div>
<h1>{props.title}</h1>
{md.render('# Remarkable rulezz!')}
</div>
</div>
)
}

export default Info;


On the page it is currently rendering.

(the title passed as props, as a h1, and...)
<h1># Remarkable rulezz!</h1>


So it's literally rendering out the whole thing as a string, when I want it to behave like html.

How do I do this? Or have I missed the whole point of md?
Thanks

Answer

If you for some reason need to render the html as-is using react you need to use dangerouslySetInnerHTML and wrap the content with any tag (div or span or something else)

<div dangerouslySetInnerHTML={{ __html: md.render('# Remarkable rulezz!') }} />

References: