MUI Drawer not rendering with React-router-dom v6

March 18, 2022

I am using ReactJS and I’m trying to have a drawer / menu displaying my different routes on each page (obviously).

So I configured in my index.js the different routes using react-router-dom@v6.
I can access my pages by entering the link directly in the URL and see the content (a simple text for the moment).

But for some reason I can’t display my Material UI Drawer (in every pages).
However I call my drawer in the BrowserRouter.
I think I missed something important.

So here is my code to create my drawer:

//src/pages/navigation/menuDrawer.js

import {React, useState, useEffect} from 'react'

// Material UI
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { Collapse } from '@mui/material';
import Tooltip from '@mui/material/Tooltip';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';

// Icônes 
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';

// Routing
import { Link } from "react-router-dom";

// Remplissage / Informations
const  NAVIGATION = require('./navigation.json'); // Data

export default function MenuDrawer() {

    // Variables
    const [open, setOpen] = useState(false);

    // Handlers
    // Handler : Ouvrir / Fermer une liste d'item
    const handleButtonItem = () => {
        setOpen(!open);
    }

  return (
    <Grid>
        <Drawer variant="permanent" anchor="left">
            {NAVIGATION.map((item) => {
                <Grid>
                    <ListItemButton onClick={handleButtonItem}>
                        <ListItemIcon>
                            <img src={item.icone} alt="Logo groupe" />;
                        </ListItemIcon>
                        <ListItemText primary={item.nom}></ListItemText>
                        {open ? <ExpandLess/> : <ExpandMore/> }
                    </ListItemButton>

                    <Collapse in={open}>
                        {item.sections.map((section, index) => {
                            <Grid>
                                <Link to={section.url}>
                                    <List>
                                        <Tooltip title={section.descr} placement="right">
                                            <ListItemButton>
                                                <ListItemText primary={section.titre} />
                                            </ListItemButton>
                                        </Tooltip>
                                    </List>
                                </Link>
                            </Grid>
                        })}
                    </Collapse>
                </Grid>
                })
            }
        </Drawer>
    </Grid>
  )
}

I checked via consoles.log() that my "NAVIGATION".json returns something and that I handle it correctly. I have my data. Even if React keeps giving me a warning like:

Array.prototype.map() expects a return value from arrow function array-callback-return

and the code in my index.js for the routes :

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

// React-router-dom V6
import {BrowserRouter, Routes, Route } from 'react-router-dom'

// Import des pages
// import App from './App';
import Accueil from './pages/accueil';
import About from './pages/about';
import Auth from './auth/authentification'

// Import du Drawer
import MenuDrawer from './components/navigation/menuDrawer'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <MenuDrawer/>
      <Routes>
        {/* Exemple of Route */}
        <Route path="/" element={<Auth/>} />
        <Route path="/about" element={<About/>} />
        <Route path="*" element={<Accueil/>} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

As you can see, I call my MUI component in under the BrowserRouter tag

PS : I think there is a problem with my handleButtonItem (same variable for several buttons) but I don’t think it is the cause of my current problem

>Solution :

Array.prototype.map() expects a return value from arrow function array-callback-return

The warning is telling you that the callback you pass to one of your map() calls does not have a return value. In your scenario this is referring to:

{NAVIGATION.map((item) => {
    <Grid>
        ...
    </Grid>
})}

You forgot to return a value by either doing it explicitly:

{NAVIGATION.map((item) => {
    return (
        <Grid>
            ...
        </Grid>
    );
})}

Or by replacing { and } with ( and ), which will cause the arrow function to implicitly return the result of the passed expression.

{NAVIGATION.map((item) => (
    <Grid>
        ...
    </Grid>
))}

When you use curly braces it means you pass a code block which can contain multiple statements. JavaScript does not assume a return value in this scenario, so if you want to return something you have to explicitly use the return keyword, just like a normal function.

If you don’t use curly braces you can only provide a single expression which is automatically returned.

numbers.map((n) => {
  return n * 2;
})

// Is equivalent to
numbers.map((n) => n * 2)

See: Arrow function expressions – Function body by MDN.

Now imagine n * 2 being a really long expression like they often are in React. You want to spread it across multiple lines. The statement below is invalid. JavaScript does not allow you to break the line directly after =>.