Outline
We've got our query with our data. Let's use it! We mentioned earlier that the great thing about MDX is the ability to use JSX directly in our Markdown.
In events.mdx, we can add a ul tag and map over our data to create an li for each item:
<ul>
{props.data.allMdx.nodes.map(node => (
<li key={node.id}>
<Link to={node.fields.slug}>{node.frontmatter.title}</Link> (
{node.frontmatter.date}) - {node.excerpt}
</li>
))}
</ul>
Don't forget to import the Gatsby Link component at the beginning of the file but after the frontmatter:
import { Link } from "gatsby"
If you run gatsby develop, you should now see a list of five events ordered by date descending. You can click on the title of each one to go to the page. Awesome!
This has been a pretty hefty tutorial -- let's do a recap of everything we've learned!