Use MDXRenderer to Render MDX Content in a Gatsby Site

InstructorLaurie Barth

Share this video with your friends

Send Tweet

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.