I have this React ponent whose main goal is to render an article stored ad MarkDown (.md file) after it is transformed into HTML by marked.

Articles.js

import React from 'react';
import marked from 'marked';
import './articles.css';

export default class Articles extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      articles: [],
      last_article: ""
    }
  }

  ponentWillMount() {
    fetch('/last_article', {
      headers: {
        'Accept': 'text/markdown'
      }
    })
    .then(res => res.text())
    .then(txt => marked(txt))
    .then(html => {
      this.setState({
        last_article: html
      });
    });
  }

  render() {
    return (
      <div className="articles">
        {this.state.last_article}
      </div>
    );
  }

}

The back-end works fine and ponentWillMount fetches the correct text and transforms it perfectly. But it renders like this:

I am not a React expert and never faced this problem before.

Any suggestions?

I have this React ponent whose main goal is to render an article stored ad MarkDown (.md file) after it is transformed into HTML by marked.

Articles.js

import React from 'react';
import marked from 'marked';
import './articles.css';

export default class Articles extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      articles: [],
      last_article: ""
    }
  }

  ponentWillMount() {
    fetch('/last_article', {
      headers: {
        'Accept': 'text/markdown'
      }
    })
    .then(res => res.text())
    .then(txt => marked(txt))
    .then(html => {
      this.setState({
        last_article: html
      });
    });
  }

  render() {
    return (
      <div className="articles">
        {this.state.last_article}
      </div>
    );
  }

}

The back-end works fine and ponentWillMount fetches the correct text and transforms it perfectly. But it renders like this:

I am not a React expert and never faced this problem before.

Any suggestions?

• javascript
• html
• reactjs
• rendering

• 2 Use dangerouslySetInnerHTML to render html. facebook.github.io/react/docs/dom-elements.html – Ved Commented Jul 31, 2017 at 5:45
• What Ved said, was just about to post that. – Kyle Richardson Commented Jul 31, 2017 at 5:52

2 Answers 2

Use the dangerouslySetInnerHTML approach as I have described below.

Go through this link to see the proper documentation about dangerouslySetInnerHTML and it's side effects

class Articles extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      articles: [],
      last_article: ""
    }
  }

  ponentWillMount() {
      this.setState({
        last_article: `<h1>Hello</h1>`
      });
    
  }
  
  getMarkdownText() {
    return { __html: this.state.last_article };
  }

  render() {
    return (
      <div className="articles" dangerouslySetInnerHTML={this.getMarkdownText()}/> 
      );
  }

}

ReactDOM.render(
  <Articles />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

As others have said, dangerouslySetInnerHTML will work, but if you are going to find yourself doing this a lot, check out this cool lib.