Outline
We've told Gatsby to build slugs and pages for our events pages, so now let's create a layout.
Create a new file under /src/pages called event-layout.js. We want to use a simple component as well as a page query.
To start, let's build a simple component that uses our MDX data:
// src/pages/event-layout.js
import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/Layout"
export default ({ data: { mdx } }) => {
return (
<Layout>
<h3>Name: {mdx.frontmatter.title}</h3>
<h3>Date: {mdx.frontmatter.date}</h3>
<MDXRenderer>{mdx.body}</MDXRenderer>
</Layout>
)
}
The MDXRenderer is part of gatsby-plugin-mdx and is used to render the compiled body of our MDX.
How do we get the data we want to use in this component? We'll use a page query. Let's do that in the next video.