antd SubMenu "TypeError: Cannot read property 'isRootMenu' of undefined"

Question

I use antd 3.15 and GraphQL to fetch data and generate a list of SubMenu and Menu.Item inside of Menu. However, I got the error message like this Uncaught TypeError: Cannot read property 'isRootMenu' of undefined I have no idea what is wrong with my code. isRootMenu is not a prop listed anywhere on the doc. ant.design/components/menu/#header and when I hardcoded all the SubMenu and Menu.List there is no problem. Can I iterate data from GraphQL to generate the SubMenu and Menu.List?

Can someone help me with this issue, please? Thank you! Here is my code:

import * as React from 'react';
import './SideNav.scss';
import { Menu, Icon } from 'antd';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

const FLOORS_QUERY = gql`
  query {
    getAllFloors {
      id
      floorName
      rooms {
        id
        roomName
        roomNumber
        roomDescription
      }
    }
  }
`;

export default class SideNav extends React.Component {
  render() {
    return (
      <Menu theme="light" defaultSelectedKeys={['1']} mode="inline">
        <Query query={FLOORS_QUERY}>
          {({ loading, error, data }) => {
            if (loading) return <h4> loading... </h4>;
            if (error) console.log(error);
            console.log(data);
            return (
              <React.Fragment>
                {data.getAllFloors.map((floor) => (
                  <SubMenu
                    key={floor.id}
                    title={
                      <span>
                        <Icon type="plus" />
                        <span>{floor.floorName}</span>
                      </span>
                    }
                  >
                    <React.Fragment>
                      {floor.rooms.map((room) => (
                        <Menu.Item key={room.id}>{room.roomNumber}</Menu.Item>
                      ))}
                    </React.Fragment>
                  </SubMenu>
                ))}
              </React.Fragment>
            );
          }}
        </Query>
      </Menu>
    );
  }
}

Answer 1

You should pass the props to the submenu.

  const CustomComponent = (props) => (
    <Menu.SubMenu title='SubMenu' {...props}>
      <Menu.Item>SubMenuItem</Menu.Item>
    </Menu.SubMenu>
  )

so a solution to your question would be to do the following;

1. move the query outside of the containing menu
2. pass the props to the SubMenu

  const FloorMapSubMenu = ({ id, floorName, rooms, ...other }) => {
  return (
    <Menu.SubMenu
      key={id}
      title={
        <span>
          <Icon type="plus" />
          <span>{floorName}</span>
        </span>
      }
      {...other} // notice the other props, this is were the 'isRootMenu' is injected from the <Menu> children
    >
      <React.Fragment>
        {rooms.map((room) => (
          <Menu.Item key={room.id}>{room.roomNumber}</Menu.Item>
        ))}
      </React.Fragment>
    </Menu.SubMenu>
  )
}

class SideNav extends React.Component {
  render() {
    return (
      <Query query={FLOORS_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <h4> loading... </h4>
          if (error) console.log(error)
          console.log(data)
          return (
            <Menu theme='light' defaultSelectedKeys={['1']} mode='inline'>
              {data.getAllFloors.map((floor, i) => (
                <FloorMapSubMenu key={i} id={floor.id} floorName={floor.floorName} rooms={floor.rooms} />
              ))}
            </Menu>
          )
        }}
      </Query>
    )
  }
}