menuLinks.map is not a function - reactjs

Question

I am trying to call a request with graphiQL but something is wrong with it. Is anybody can help me? I am getting this error:
TypeError: menuLinks.map is not a function
It is working on gatsby/react
import React from "react"
import { graphql, StaticQuery, Link } from "gatsby"
import { Menu } from "antd"
import headerStyles from "./headerStyles.module.scss"
class Header extends React.Component {
render() {
const menuLinks = props.data.site.siteMetadata
return (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
menuLinks {
name
link
}
}
}
}
`}
render={data => (
<div data={data} className={headerStyles.menu}>
<Link to="/">
<img
style={{ width: "30px", float: "left" }}
/>
</Link>
<Menu mode="horizontal" breakpoint="lg" collapsedWidth="0">
{menuLinks.map(link => (
<Menu.Item key={link.name}>
<Link to={link.link}>{link.name}</Link>
</Menu.Item>
))}
</Menu>
</div>
)}
/>
)
}
}
export default Header

Answer 1

const menuLinks = this.props.data.site.siteMetadata
instead of
const menuLinks = props.data.site.siteMetadata
How to access props in react you can check this props
In Class based Component
this.props.data
In function based component
props.data

Answer 2

You should use this.props.data.site.siteMetadata instead of props.data.site.siteMetadata because you are using Class component.
And things can go wrong in these cases. You have to check whether data, site, and siteMetadata existed either in the componentDidMount or render. Most likely, in the first render your props.data.site.siteMetadata might not exist.
Change your mapping to this code.
{
this.props.data
&& this.props.data.site
&& this.props.site.siteMetadata
&& this.props.site.siteMetadata.length > 0
? this.props.site.siteMetadata.map(each => <MenuItem />)
: <Loading />
}