reactjs - How do I load a markdown file into a react component?

Question

How would I load a .md markdown file into a react component? I have tried so many npm libraries through google searches and I cant find a good solution.

I want to load the .md file something like:

render() {
    <div>
        <MarkDown src="about.md" />
    </div>
}

Answer 1

I use marked (GitHub).

I first import it like this:

import marked from "marked";

I then fetch my *.md file within React's componentDidMount event and store it in my component's state using marked(text) (where text is the response):

componentDidMount() {
  const readmePath = require("./Readme.md");

  fetch(readmePath)
    .then(response => {
      return response.text()
    })
    .then(text => {
      this.setState({
        markdown: marked(text)
      })
    })
}

...and finally I render it on the page using the dangerouslySetInnerHTML attribute:

render() {
  const { markdown } = this.state;

  return (
    <section>
      <article dangerouslySetInnerHTML={{__html: markdown}}></article>
    </section>
  )
}