Gatsby
Up and Running with Gatsby: Markdown & MDX

Events Index Code

Mute
Current Time 0:00
/
Duration Time 0:00
Loaded: 0%
Progress: 0%
Stream TypeLIVE
Remaining Time -0:00
 
PRO

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!

 

I finished! On to the next chapter