notesTemplate.js

import React from 'react';
import Layout from '../components/layout';
import { graphql } from 'gatsby';

// Functional component
const notes = (props) => {
  const notesMarkdown = props.data.markdownRemark;
  const { title } = notesMarkdown.frontmatter;
  
  // Setting the inner HTML to the HTML provided by MarkdownRemark
  return (
    <Layout>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{__html: notesMarkdown.html}}></div>
    </Layout>
  );
}

export default notes;

// The query for getting the correct markdown-remark data (matching on the slugs)
export const query = graphql`
  query NotesQuery($slug: String!) {
    markdownRemark(fields: { slug: {eq: $slug } }) {
      html
      frontmatter {
        title
        description
      }
    }
  }
`;