MUI Drawer not rendering with React-router-dom v6

Question

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

Answer 1

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.

numbers.map((n) =>
  n * 2
)

To make it more obvious that n * 2 is the expression of the arrow function people often add additional parentheses.

numbers.map((n) => (
  n * 2
))