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!