'Objects are not valid as a React child'

Question

I don't understand why the following error appears. I'm trying to render {links}, {collapse} in a return function, but it doesn't work. links and collapse is about opening sub menus. Thank you for your help.

The error message:

Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, displayName, muiName}). If you meant to render a collection of children, use an array instead.

-- Sidebar.js

/*eslint-disable*/
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import { NavLink } from "react-router-dom";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import {
  Drawer,
  Hidden,
  List,
  ListItem,
  ListItemText,
  Icon,
  Collapse
} from "@material-ui/core";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import ListItemLink from "./ListItemLink";

// core components
import AdminNavbarLinks from "components/Navbars/AdminNavbarLinks.js";
import RTLNavbarLinks from "components/Navbars/RTLNavbarLinks.js";

import styles from "assets/jss/material-dashboard-react/components/sidebarStyle.js";

const useStyles = makeStyles(styles);

export default function Sidebar(props) {
  const classes = useStyles();
  // verifies if routeName is the one active (in browser input)
  function activeRoute(routeName) {
    return window.location.href.indexOf(routeName) > -1 ? true : false;
  }
  const { color, logo, image, logoText, routes } = props;
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  var links = (
    <div>
      {routes.map((prop, key) => {
        return (
          <div>
            {prop.submenu.length > 0 ? (
              <ListItemLink
                to={prop.layout + prop.path}
                key={prop.id}
                menuText={prop.name}
                onClick={handleClick}
                subOpen={open}
                icon={prop.icon}
              />
            ) : (
              <ListItemLink
                to={prop.layout + prop.path}
                key={prop.id}
                menuText={prop.name}
                icon={prop.icon}
              />
            )}
          </div>
        );
      })}
    </div>
  );

  var collapse = (
    <Collapse in={open} timeout="auto" unmountOnExit>
      <List component="div" disablePadding>
        {routes.map((prop, key) => {
          {
            prop.submenu.map((sub, index) => {
              return (
                <ListItemLink
                  key={sub.id}
                  to={sub.path}
                  menuText={sub.name}
                  icon={sub.icon}
                  className={classes.nested}
                />
              );
            });
          }
        })}
      </List>
    </Collapse>
  );

  var brand = (
    <div className={classes.logo}>
      <a
        className={classNames(classes.logoLink, {
          [classes.logoLinkRTL]: props.rtlActive
        })}
        target="_blank"
      >
        <div className={classes.logoImage}>
          <img src={logo} alt="logo" className={classes.img} />
        </div>
        {logoText}
      </a>
    </div>
  );

  return (
    <div>
      <Hidden mdUp implementation="css">
        <Drawer
          variant="temporary"
          anchor={props.rtlActive ? "left" : "right"}
          open={props.open}
          classes={{
            paper: classNames(classes.drawerPaper, {
              [classes.drawerPaperRTL]: props.rtlActive
            })
          }}
          onClose={props.handleDrawerToggle}
          ModalProps={{
            keepMounted: true // Better open performance on mobile.
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>
            {props.rtlActive ? <RTLNavbarLinks /> : <AdminNavbarLinks />}
            <List component="nav" className={classes.list}>
              {links}
              {collapse}
            </List>
          </div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
      <Hidden smDown implementation="css">
        <Drawer
          anchor={props.rtlActive ? "right" : "left"}
          variant="permanent"
          open
          classes={{
            paper: classNames(classes.drawerPaper, {
              [classes.drawerPaperRTL]: props.rtlActive
            })
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>
            <List component="nav" className={classes.list}>
              {links}
              {collapse}
            </List>
          </div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
    </div>
  );
}

Sidebar.propTypes = {
  rtlActive: PropTypes.bool,
  handleDrawerToggle: PropTypes.func,
  bgColor: PropTypes.oneOf(["purple", "blue", "green", "orange", "red"]),
  logo: PropTypes.string,
  image: PropTypes.string,
  logoText: PropTypes.string,
  routes: PropTypes.arrayOf(PropTypes.object),
  open: PropTypes.bool
};

-- ListItemLink.js

import React from "react";
import { ListItem, ListItemText, ListItemIcon } from "@material-ui/core";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import { PropTypes } from "prop-types";
import { Link as RouterLink } from "react-router-dom";

function ListItemLink(props) {
  const { to, menuText, icon, subOpen, ...other } = props;

  return (
    <ListItem button component={RouterLink} to={to} {...other}>
      <ListItemIcon>{icon}</ListItemIcon>
      <ListItemText primary={menuText} />
      {subOpen != null ? subOpen ? <ExpandLess /> : <ExpandMore /> : null}
    </ListItem>
  );
}

ListItemLink.propTypes = {
  subOpen: PropTypes.bool,
  to: PropTypes.string.isRequired
};

export default ListItemLink;

Answer 1

I solved my question as followed: I guess I returned the wrong object...

<List
  {...rest}
  className={clsx(classes.root, className)}
>
  {pages.map(page => (
    <React.Fragment key={page.title}>
      <ListItem
        className={classes.item}
        disableGutters
        key={page.title}
        onClick={page.submenu.length > 0 ? handleClick : null}
        open={page.submenu.length > 0 ? open : null}
      >
      <Button
        activeClassName={classes.active}
        className={classes.button}
        component={CustomRouterLink}
        to={page.href}
      >
      <div className={classes.icon}>{page.icon}</div>
      {page.title}
      {page.submenu.length > 0 ? (
          open ? (
            <ExpandLess />
          ) : (
            <ExpandMore />
          )
        ) : null}
      </Button>
      </ListItem>
      <Collapse in={open} timeout={100} unmountOnExit>
      <List component="div" disablePadding>
        {page.submenu.map((sub, index) => {
          return (
            <React.Fragment key={sub.title}>
              <ListItem
                className={classes.nested}
                disableGutters
                key={sub.title}
              >
              <Button
                activeClassName={classes.active}
                className={classes.button}
                component={CustomRouterLink}
                to={sub.href}
              >
                <div className={classes.icon}>{sub.icon}</div>
                {sub.title}
                </Button>
              </ListItem>
            </React.Fragment>
          );
        })}
      </List>
      </Collapse>
    </React.Fragment>
  ))}
</List>

Answer 2

in collapse, you have two map functions. you should return the second map function.

something like this:

const collapse = (
  <Collapse in={open} timeout="auto" unmountOnExit>
    <List component="div" disablePadding>
      {routes.map((prop, key) => {
        return prop.submenu.map((sub, index) => {
          return (
            <ListItemLink
              key={sub.id}
              to={sub.path}
              menuText={sub.name}
              icon={sub.icon}
              className={classes.nested}
            />
          );
        });
      })}
    </List>
  </Collapse>
);