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>   ) }