Markdown to React page layout - Basic

MarkdownElement.jsx

import marked from "marked";
import PropTypes from "prop-types";
import React from "react";

const renderer = new marked.Renderer();

const markedOptions = {
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  renderer
};

class MarkdownElement extends React.Component {
  static propTypes = {
    text: PropTypes.string
  };

  render() {
    const { text } = this.props;

    return (
      <div dangerouslySetInnerHTML={{ __html: marked(text, markedOptions) }} />
    );
  }
}

export default MarkdownElement;

MarkdownPage.jsx

import PropTypes from "prop-types";
import React from "react";

import MarkdownElement from "MarkdownElement";

class MarkdownPage extends React.Component {
  static propTypes = {
    req: PropTypes.func.isRequired
  };

  getSections(markdown) {
    return markdown
      .filter(section => !/^\s*$/.test(section)); // Remove empty lines
  }

  render() {
    const { req } = this.props;

    let markdown;

    req.keys().forEach(filename => {
      if (filename.indexOf(".md") !== -1) {
        markdown = req(filename).default;
      }
    });

    const sections = getSections(markdown);

    return (
      <div>
        <div className="content">
          {sections.map((section, index) => {
            return <MarkdownElement key={index} text={section} />;
          })}
        </div>
      </div>
    );
  }
}

export default MarkdownPage;