Kreitzo Kreitzo - 5 months ago 34
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">
{md.render('# Remarkable rulezz!')}

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?


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!') }} />