CODEWITHSUNDEEP
reactjsmaterial-ui
shak.s
shak.s

Reputation: 429

Failed proptype classes material-ui

I have this warning in my console:index.js:2178 Warning: Failed prop type: The prop classes is marked as required in WithStyles(Grid), but its value is undefined. I have checked and made sure that classes is being passed on as a prop properly. I am not sure from where in my code this error is coming from. How can I get rid of this error?

const styles = theme => ({
  subtitle: {
    height: "auto"
  },
  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper,
    margin: 0
  },
  gridList: {
    width: "80%",
    height: "auto"
  },
  icon: {
    color: "rgba(255, 255, 255, 0.54)"
  }
});

class GridListings extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <Grid>
          <GridList cellHeight={100} cols={3} className={classes.gridList}>
            <GridListTile key="Subheader" cols={3} rows={1}>
              <ListSubheader
                component="div"
                style={{
                  fontSize: "60px",
                  marginTop: "20px"
                }}
              >
              Listings
              </ListSubheader>
            </GridListTile>
            {tileData.map(tile => (
              <GridListTile key={tile.img} cols={1} rows={3}>
                <img src={tile.img} alt={tile.title} />
                <GridListTileBar
                  className={classes.subtitle}
                  title={tile.title}
                  subtitle={<span>by: {tile.author}</span>}
                  actionIcon={
                    <IconButton className={classes.icon}>
                      <InfoIcon />
                    </IconButton>
                  }
                />
              </GridListTile>
            ))}
          </GridList>
        </Grid>
      </div>
    );
  }
}

Grid.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(GridListings);

Upvotes: 0

Views: 5028

Answers (1)

Jack
Jack

Reputation: 9242

Your custom class is named GridListings, you export GridListings (with the withStyles), but you've defined your propTypes on Grid.propTypes:

Grid.propTypes = {
  classes: PropTypes.object.isRequired
};

Try changing it to:

GridListings.propTypes = {
  classes: PropTypes.object.isRequired
};

My guess is that you're changing / modifying Grid's (a @material-ui component) propTypes, instead of your own component (GridListings).

Upvotes: 2

Related Questions