Navigation js 2nd attempt with Map

gistfile1.txt

import React from "react"
import { graphql, StaticQuery, Link } from "gatsby"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"

function menuLinks() {
  return (
    <StaticQuery
      query={graphql`
      query menuItems {
        site {
          siteMetadata {
            MenuLinks {
              link
              title
              subMenu {
                link
                title
              }
            }
          }
        }
      }
      `}
      render={data => (
        <ul>
          {data.site.siteMetadata.map((element) => (
            <Nav.Link as="li" key={element.MenuLinks.title}>
              <Link
                to={element.MenuLinks.link}
              >
                {element.MenuLinks.title}
              </Link>
              {element.MenuLinks.subMenu && element.MenuLinks.subMenulength > 0 ? (
                <NavDropdown class="sub-items responsive-navbar-nav">
                  {element.MenuLinks.subMenu.map((subpath) => (
                    <NavDropdown.Item a href={subpath.link}>
                      {subpath.title}
                    </NavDropdown.Item>
                  ))}
                </NavDropdown>
              ) : null}
            </Nav.Link>))
          }</ul>
      )}
    />
  )
}


class Navigation extends React.Component {
  render() {
    return (
      <Navbar collapseOnSelect expand="md" className="site-navigation">
        <Navbar.Brand class="logo" href="/">Metsän Otus</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <ul>
            {menuLinks}
          </ul>
        </Navbar.Collapse>
      </Navbar >
    )
  }
}


export default Navigation