reactjs - How to pass Markdown file as this.props in React? -

i'm building site in react using redux, , goal have /pages folder full of markdown files that'll represent pages content.

i have react container (smart) , react component (dumb) that'll used render content. thinking i'll import markdown files parent container , pass them down child component render them in browser. know i'll need use markdown-it convert md html , maybe i'll need use in child component.

my questions are:

1) how pass in markdown files parent child using this.props? 2) on right track? right way go it?

here components:

page parent container

import react 'react' import samplepage './../components/samplepage'  export default class page extends react.component {   constructor(props) {     super(props)   }   render() {     return (       <section>         <samplepage />       </section>     )   } } 

samplepage child component

import react 'react' import { link } 'react-router'  export default class samplepage extends react.component {   constructor(props) {     super(props)   }   render() {     return (       <div classname="page-container">         <link to="/" classname="previous-link">go home</link>          // want render md here using {this.props.markdown}        </div>     )   } } 

a few things:

1) recommend using markdown jsx parser keep templating safe (otherwise you'd have use dangerouslysetinnerhtml)

2) i'd run parser during build time, ready go. if you're using webpack or browserify, can add custom loader/transformer function *.md files being required , run through parser.

3) parsed markdown simple jsx , can required & dropped existing component you've done above.