Stuck at "Cannot read property 'props' of undefined"

Question

I'm testing out the gatsby-source-wordpress plugin from Gatsby, and I'm trying to get my menu to fetch the links from my Wordpress site.

I've managed to get all of the Wordpress schemas to come up in GraphiQL, and copied the GQL code from there.

I've made a Layout component, where I've tried most of what I can to make it work. However, I keep getting TypeError: Cannot read property 'props' of undefined when I deploy my Gatsby site to localhost.

Anyone ever come across this before? I'm kinda new to GraphQL and all that, so I honestly have no clue what's wrong, or if it's even GraphQL that's causing this. Any help is greatly appreciated! (Sorry if this is a really simple fix, and I'm just being ignorant)

I've searched through Google, Stack Overflow, Youtube, and anywhere else I could think of.

Code

Layout

import React, { Component } from "react";
import PropTypes from "prop-types";
import { StaticQuery, graphql } from "gatsby";
// import Image from "gatsby"

import Header from "../Header";
import MainMenu from "../Nav";
// import Aside from "../Aside"
// import Footer from "../Footer";

const Layout = ({ children }) => {
  const menu = this.props.data.allWordpressWpApiMenusMenusItems;
  return (

    <StaticQuery
      query={graphql`
        query menuQuery {
          allWordpressWpApiMenusMenusItems {
            edges {
              node {
                id
                name
                items {
                  title
                  object_slug
                  url
                }
              }
            }
          }
        }
      `}

      render={menu => (
        <>
          <Header>
            <MainMenu menu="{data.allWordpressWpApiMenusMenusItems}" />
          </Header>
          <div className="Layout">
            <main>{children}</main>
          </div>
          <footer>Footer</footer>
        </>
      )}
    />
  );
};

Layout.propTypes = {
  children: PropTypes.node.isRequired
};

export default Layout;

Menu component

import React, { Component } from "react";
// import { Link } from "gatsby";

class MainMenu extends Component {
  render() {
    const data = this.props.data.allWordpressWpApiMenusMenusItems;
    console.log(data);

    return (
      <nav className="main-menu">
        <ul>
          <p>Test</p>
        </ul>
      </nav>
    );
  }
}

export default MainMenu;

Expected result: The site renders on localhost:8000
Error messages I recieve:

src/components/Layout/index.js:11
   8 | // import Aside from "../Aside"
   9 | // import Footer from "../Footer";
  10 | 
> 11 | const Layout = ({ children }) => {
  12 |   const menu = this.props.data.allWordpressWpApiMenusMenusItems;
  13 |   return (
  14 |     <StaticQuery

Answer 1

You're accessing this.props in a function based component. Change your declaration to

const Layout = ({ children, data }) => {
    const menu = data.allWordpressWpApiMenusMenusItems;

Or explicitly declare props and destructure the properties you want

const Layout = props => {
    const { data, children, ...rest } = props
    const menu = data.allWordpressWpApiMenusMenusItems;