index.js:1375 Warning: Material-UI: the value provided `/` to the Tabs component is invalid. None of the Tabs children have this value

Question

I am using Material UI tabs and React-Router, both are working fine visually but I realized while using Developer tools that there is an error every time I click on a tab or on the menu button in the case of phone size. The error says:

index.js:1375 Warning: Material-UI: the value provided/to the Tabs component is invalid. None of the Tabs children have this value. You can provide one of the following values: 0, 1, 2, 3, 4, 5.

I tried replacing the router with a state and active index structure but the error still persists. How to make sure that the error doesn't occur when clicking on the tab or the menu button? And how to make sure it keeps directing us to the concerned page smoothly with the concerned path? Thanks

PS: the screens they are directed to are all texts, for now, nothing in particular, I can edit the post if showing the code is required, though I doubt so. Thanks again

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import home from '../home.svg';
import Contact from '../Screens/Contact'
import contact from '../contact.svg';
import Profile from '../Screens/Profile'
import profile from '../profile.svg';
import Settings from '../Screens/Settings'
import settings from '../settings.svg'
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter} from "react-router-dom";



const VerticalTabs = withStyles(theme => ({
  flexContainer: {
    flexDirection: "column"
  },
  indicator: {
    display: "red"

  },

  root:{
    position:"fixed",
    left:-70,
    top:0,

  },

}))(Tabs);

const MyTab = withStyles(theme => ({
  selected: {
    color: "white",
    borderRight: "none",


  },
  root: {
  //minWidth: 121,
  margin:0,
 paddingBottom:119

  },
  '@media screen and (min-width: 600px) and (max-width: 1205px)':{

    root: {
      minWidth: 151,
    }
  }
}))(Tab);


const styles = theme => ({
  root: {
    flexGrow: 1,
    marginTop: theme.spacing(3),
    backgroundColor: theme.palette.background.paper,

  },
  tabRoot: {
    minWidth: 10,
  },
});

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',

  },
  menuButton:{
    visibility: "hidden"
  },

  appBar: {
    marginLeft: 300,


  },
  drawerPaper: {
    width: 100,
background: "#262A2C",
fontSize:65,
height:"120%",
top:-10


      },


      content: {
        flexGrow: 1,
        padding: theme.spacing(3),

      },

      '@media screen and (min-width: 600px) and (max-width: 1205px)':{
        drawerPaper: {
          width: 80,
      //background: "black"
        },


      },

      '@media (max-width: 600px)':{

        drawerPaper: {
          width: 300,
      //background: "black"
        },
  appBar: {



  },
  menuButton:{
   visibility: "visible"
 },
  }

}));



function ResponsiveDrawer() {
  const [value, setValue] = React.useState(0);
  const classes = useStyles();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  function handleChange(event, Value) {
    setValue(Value);
  }




  function handleDrawerToggle() {
    setMobileOpen(!mobileOpen);
  }

  const drawer = (




    <Route
          path="/"
          render={({ location }) => (

              <nav>
                  <div style={{ left: 70, position: "relative", marginTop: 40 }}>

      <VerticalTabs value={location.pathname} variant="fullWidth" onChange={handleChange}  
          >
        <MyTab  
        component={Link} to="/"
        icon ={<img 
        className= "home"
        src={home} 
        alt="home" 
        /*Pay FlatIcon or replace by design *//>}
        label={<p className="home-Text" >
        Home
        </p>} 
        />
        <MyTab  
        component={Link} to="/Screens/Contact"
        icon ={<img 
        className= "contact"
        src={contact}  
        alt="contact" 
        /*Pay FlatIcon or replace by design *//>}
        label={<p className="contacts-Text" >
       Contact
        </p>} 
        />
        <MyTab 
             component={Link} to="/Screens/Profile"
        icon={<img 
        className= "profile" 
        src={profile} 
        alt="profile" 
        /*Pay FlatIcon or replace by design *//>}
        label={<p className= "profile-Text" >
       Profile
        </p>} 
        />
        <MyTab 
             component={Link} to="/Screens/Settings"
        icon = {<img
        className= "settings" 
        src={settings} 
         alt="settings"
        /*Pay FlatIcon or replace by design *//>}
        label={<p className="settings-Text" >
      Settings
        </p>} 
        />


      </VerticalTabs>

                  </div>
                  </nav>

          )}
          />





  );

  return (
    <nav>
    <BrowserRouter>
    <div className="aBar">
      <CssBaseline />
      <AppBar style={{position:"relative",background: 'transparent', boxShadow: 'none', color: "red"}}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="Open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            className={classes.menuButton}
          >
            <MenuIcon />

          </IconButton>
          <SearchBar />
          <div className="logo">
          <Typography 
          component={Link}
          to="/"
          className= "logo-Spec" 
          style={{fontSize:30, textDecoration: 'none' }} 
          variant="h1"
          //don't forget variant= "h1" if you want to modify logo style
          >

          Logo 

          </Typography>
          </div>
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer}>
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer
          style={{color:"black"}}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>

        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>

        </Hidden>

        <Switch>

                <Route path="/Screens/Contact" component={Contact}  />
                <Route path="/Screens/Settings" component={Settings} />
                <Route path="/Screens/Profile" component={Profile}  />
                <Route path="/" component={Home} />

              </Switch>
      </nav>

    </div>
    </BrowserRouter>
    </nav>
  );
}




export default  withStyles(styles)(ResponsiveDrawer);

Solution

On your Tabs element you have a value of location.pathname. This indicates that the "selected" Tab is the one with this value, but you aren’t specifying a value prop for any of your tabs. When no value is specified, the value of a Tab defaults to its index within the Tabs parent.

The error message is telling you that the value on Tabs (via VerticalTabs) does not match any of the values on your individual Tab elements (MyTab). To resolve this, you should specify the value in the to property also as the value property on the Tab elements.

References:

• https://material-ui.com/api/tabs/
• https://material-ui.com/api/tab/

Comments

[Camille Basbous]

Hi Ryan thanks for the reply, so what I've done is that I have removed location.pathname and replace the value with {value} whereas its initial state is equal to 0. After that, it worked when I click on tabs or the menu there are no errors on the dev tool. I did not change the value of the tab element. The other factor that changed is that the PrivateTabIndicator was visible, so I will just find a way to take it off. If you think my method will affect the code in the long-term please feel free to offer a better-exampled solution, thanks again.