React. How can I insert a Grid into a TabPanel without warnings?

user_14844785 0
Viewed 818

Question is self explanatory. I'm using Tabs from Material-UI so that I can render different Grids depending on user's choice. Each panel should contain a Grid with various textfields and components. Problem is I get a warning saying:

Warning: validateDOMNesting(...): div cannot appear as a descendant of p.

Below is the code:

<Grid item md={10} xs={10} className={classes.divStyle}>
      {categories.map((category, i) => (
             <TabPanel value={value} index={i} key={`tabpanel-${i}`}>
                  <Grid p={3}>
                  </Grid>
              </TabPanel>
                ))};
</Grid>

How could I solve it? Thanks in advance!

material-ui react-native reactjs javascript
1 Answers

Your code is basically correct (assuming that you have your here not shown TabContext, Tab, value, etc.).

Check if you have a parent component that renders as a <p> tag, e.g. by using the browsers code inspection.

A common source of this error seems to be a parent <Typography> element, which renders as a <p> tag by default. This can be changed by e.g. <Typography component="div">. Alternatively the Typography element might be better used further down the tree, i.e. not as a parent, but more like the same way as you would use the p-tag.

user_75564570
Related