2

I have made a Horizontal Grid List in React with Material UI, but the GridListTile component is throwing 4 warnings (below) about attribute being on the <li>

in li (created by ForwardRef(GridListTile))

the errors are regarding the Attributes: disableElevation, disableFocusRipple, disableRipple, fullWidth. all of which i have used elsewhere in the app, but not anywhere in this file or the children components.

Errors: error in console, everything is the same in the other 3 attributes, including code line numbers

Warning: React does not recognize the `disableElevation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableelevation` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in li (created by ForwardRef(GridListTile))
in ForwardRef(GridListTile) (created by WithStyles(ForwardRef(GridListTile)))
in WithStyles(ForwardRef(GridListTile)) (at Feed.js:202)
in div (created by ForwardRef(ButtonGroup))
in ForwardRef(ButtonGroup) (created by WithStyles(ForwardRef(ButtonGroup)))
in WithStyles(ForwardRef(ButtonGroup)) (at Feed.js:200)
in ul (created by ForwardRef(GridList))
in ForwardRef(GridList) (created by WithStyles(ForwardRef(GridList)))
in WithStyles(ForwardRef(GridList)) (at Feed.js:199)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Feed.js:198)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Feed.js:197)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Feed.js:196)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Feed.js:221)
in div (created by ForwardRef(Container))
in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
in WithStyles(ForwardRef(Container)) (at Feed.js:220)
in Feed (created by Context.Consumer)
in Route (at Routes.js:69)
in Switch (at Routes.js:61)
in Router (created by BrowserRouter)
in BrowserRouter (at Routes.js:60)
in ThemeProvider (at Routes.js:59)
in Routes (at src/index.js:5)

here is the code for the GridList section

const feedButtons = () => {
return (
  <Grid item style={{ marginBottom: "0.25rem" }}>
    <Grid container direction="row" justify="center" alignItems="center">
      <Grid item className={classes.horizList}>
        <GridList className={classes.gridList} cols={2.5}>   //this is line #199 in the code
          <ButtonGroup variant="text" aria-label="show fed item selection">
            {typesArray.map((tile, i) => (
              <GridListTile key={tile.label}>
                <Button
                  color="secondary"
                  onClick={() => setShow(tile.source)}
                >
                  {tile.label}
                </Button>
              </GridListTile>
            ))}
          </ButtonGroup>
        </GridList>
      </Grid>
    </Grid>
  </Grid>
);};

this is the return section of the component:

  return (
<Container disableGutters>
  <Grid
    container
    direction="column"
    justify="flex-start"
    alignItems="center"
  >
    {feedButtons()}
    {showItems()}
    {showError()}
  </Grid>
</Container>

);

It is all just a normal level React component besides the GridTile & i don't know how go and change the inner workings of the GridTile component as is sort of suggested in this similar problem/answer: stackoverflow similar answer

How do i get these warnings to go away, hopefully by fixing the issue, or via something else?

JustIn Time
  • 21
  • 1
  • 4
  • 4
    This is because you have `GridListTile` as a child of `ButtonGroup`. `ButtonGroup` [uses cloneElement to modify the props of its children](https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui/src/ButtonGroup/ButtonGroup.js#L223) which it is assuming are `Button` elements. – Ryan Cogswell Mar 10 '21 at 18:40
  • That link makes it clear, thank you. I was using the ButtonGroup like that as it made the styling look good, but it guess it is not a good way to do things. I'll get rid of the ButtonGroup and stick with just a GridList>GridListTile>Button setup. Thanks for helping, it cleared up my confusion & helped resolve my issue. – JustIn Time Mar 10 '21 at 22:10
  • 2
    This should be posted in an answer so it could be accepted. I had the exact same problem with `Tabs` component, containing `Tab` elements and another DOM element, which was giving me errors since props were cloned and passed to this element. Taking it out of the `Tabs` element solved the issue! – Cécile Fecherolle Oct 13 '21 at 12:13

0 Answers0