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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!