Combine JSX components and MDX documentsUpdated: July 1, 2021
By default, the
gatsby-plugin-mdx plugin supports frontmatter, so you can define values like
title at the beginning of your MDX document:
The frontmatter is also available in
props.pageContext.frontmatter and can be accessed in blocks of JSX in your MDX document. This functionality can be very useful if you have repetitive content and want to loop over it.
In the example above, we have a list of faq questions. If you want to render all the faq on your page, you can either run a GraphQL query on your template file or simply import a React component into the MDX file: