Material-ui: Button in a tab list

Question

I have a set of tabs that I want to be followed by an add button (to add a new tab). I just added a button to the children of the Tabs component and it renders and works exactly how I want it to, but there are so many warnings in the developer console.

        <AppBar position="static">
          <Tabs
            value={this.props.selectedTab}
            onChange={this.handleTabSelect}
            textColor="secondary"
          >
            {this.props.ListOfStuff.map(el => {
              return (
                <Tab
                  className={classes.tabButton}
                  value={el.ClientId}
                  label={el.Label}
                  id={el.ClientId}
                  aria-controls={"tabPanel-" + el.ClientId}
                  key={"tab-" + el.ClientId}
                />
              );
            })}
            <Button
              className={classes.addButton}
              onClick={this.addNewTab}
            >
              <AddIcon color="secondary" className={classes.addIcon} />
              NEW TAB
            </Button>
          </Tabs>
        </AppBar>

warnings like: - Warning: Received false for a non-boolean attribute indicator. - Warning: React does not recognize the textColor prop on a DOM element. - Warning: ForwardRef(InputBase) contains an input of type time with both value and defaultValue props.

Any suggestions on how to keep it rendering in the same way but to get rid of all of these warnings?

Thanks

Answer 1

The Tabs component clones its child elements (presumed to be Tab elements) in order to pass additional properties (e.g. properties related to the "selected" tab).

The warnings are caused by these additional properties being passed to the Button component. You can fix these warnings by wrapping Button in a component that ignores the additional properties passed by Tabs such as the following:

const ButtonInTabs = ({ className, onClick, children }) => {
  return <Button className={className} onClick={onClick} children={children} />;
};

Full working example:

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      <Box p={3}>{children}</Box>
    </Typography>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired
};

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`
  };
}

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },
  addButton: {
    color: "white"
  }
}));

const ButtonInTabs = ({ className, onClick, children }) => {
  return <Button className={className} onClick={onClick} children={children} />;
};

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const [showThirdTab, setShowThirdTab] = React.useState(false);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
        >
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          {showThirdTab && <Tab label="Item Three" {...a11yProps(2)} />}
          <ButtonInTabs
            onClick={() => setShowThirdTab(true)}
            className={classes.addButton}
          >
            <AddIcon color="secondary" />
            New Tab
          </ButtonInTabs>
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}