Importing Markdown file into React component in Gatsby - reactjs

Question

In Gatsby, how can I display the contents of a markdown file within a React component?
I am using the official gatsby-starter-blog starter which comes with markdown support. It works great for the blog posts that are already set up.
However, I now added a new About page. And on that page, rather than writing all of the content in jsx, I would like to write some of the content in a separate markdown file that I can import into the React component for my About page.
What do I need to do to achieve this?
Folder structure:
content
- pages
-- about-content.md
src
- pages
-- about-page.js
PS: I do not want my md file turned into its own page. I want to import it into a React component. And I want that component to be the page.

Answer 1

In gatsby-starter-blog this is the code snippet that turns the markdown text into a blog page:
<section dangerouslySetInnerHTML={{ __html: post.html }} />
You take the GraphQL query and the code snippet from above and put it into the about-page.js component:
const About = (props) => {
const { data: { legal: { edges } } } = props;
const { node: { childMarkdownRemark: { frontmatter, html } } } = edges[0];
return (
<Layout>
// display other React components
<section dangerouslySetInnerHTML={{ __html: html }} /> // display markdown
// display other React comonents
</Layout>
);
}
export const query = graphql`
{
legal: allFile(
filter: {
internal: {
mediaType: {eq: "text/markdown"}},
name: {eq: "about-content"}
edges {
node {
childMarkdownRemark {
html
}
}
}
}
}
`;
export default About;
Note that Gatsby implicitly builds urls out of your file names inside the pages folder. So the url would be localhost:8000/about-page/.