CODEWITHSUNDEEP
javascripthtmlreactjsmarkdown
WillKre
WillKre

Reputation: 6158

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

Upvotes: 2

Views: 1606

Answers (1)

zerkms
zerkms

Reputation: 255015

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:

Upvotes: 4

Related Questions