I have this React component 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: ""
    }
  }

  componentWillMount() {
    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 `componentWillMount` fetches the correct text and transforms it perfectly. But it renders like this:

[![enter image description here](https://i.stack.imgur.com/aw4D3.png)](https://i.stack.imgur.com/aw4D3.png)

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

Any suggestions?