This is the component returns a particular blog post and renders it's content on the screen

{Mdx.slug}.js

import React from "react";
import Layout from "../../components/layout";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";


const BlogPosts = ({ data }) => {
  return (
    <Layout>
      <MDXRenderer>{data.mdx.body}</MDXRenderer>
    </Layout>
  );
};

export const query = graphql`
  query ($slug: String) {
    mdx(slug: { eq: $slug }) {
      frontmatter {
        date(formatString: "MM DD YYYY")
        title
      }
      body
    }
  }
`;

export default BlogPosts;