Use MDXRenderer to Render MDX Content in a Gatsby Site
In this lesson, you will update the BlogPostPage component to render the post's content using MDXRenderer. MDXRenderer is a React component that takes compiled MDX content and renders it.
First, add the body to the GraphQL template function defined inside of {Mdx.slug}.js. Next, update the BlogPostPage component with a variable post, wrap the return object with the Layout component, expose the title, and use MDXRenderer. Inside MDXRenderer, pass body to render the entire post.
Instructor: [0:01] Add body to the query so that we're querying the content inside each of our posts. Import { MDXRenderer } from 'gatsby-plugin-mdx'. We'll import our layout component as well. We're going to replace what we're rendering in this component. Right now, it's an h1 with a title from the frontmatter.
[0:27] First, we want to make a variable called post that will access the MDX information on our data object. We'll wrap our entire return object in our layout component. We use Semantic HTML within article element. We'll use our frontmatter title inside an h1 again, and we'll use the MDXRenderer component. Inside of it, we'll use the body from our post.
[1:08] Now, we're rendering our entire post.