Use MDXRenderer to Render MDX Content in a Gatsby Site

Laurie Barth
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.