Material-ui: [CardExpandable] openIcon && closeIcon not passed correctly.

Created on 22 Nov 2016 · 7Comments · Source: mui-org/material-ui

Problem description

For the Card component the openIcon and closeIcon properties of CardHeader are not down passed correctly. Look here Also I get this warning: warning.js:36 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. See DetailContactEditor > Card > CardExpandable > IconButton > EnhancedButton > button > ... > IconButton > EnhancedButton > button.

As a result they are not displayed correctly.

Versions

Material-UI: 0.16.4
React: 15.3.2
Browser: Chrome latest (54), Mac

Here is code to reproduce the issue

```

showExpandableButton
openIcon={} // not passed correctly
closeIcon={} // not passed correctly
/>

Test

I think the problem is here:

https://github.com/callemall/material-ui/blob/f49c0b49338ea2e6165de4e0c0dd7f5b2f785b33/src/Card/CardExpandable.js

Instead of

render() {
const styles = getStyles(this.props, this.context);

return (
  <IconButton
    style={Object.assign(styles.root, this.props.style)}
    onTouchTap={this.props.onExpanding}
  >
    {this.props.expanded ? this.props.openIcon : this.props.closeIcon}
  </IconButton>
);

I'd much rather have

  ```
static defaultProps = {
    closeIcon: // wrap in IconButton,
    openIcon:  // wrap in IconButton,
  };

 render() {
    const styles = getStyles(this.props, this.context);

    return (
        {this.props.expanded ? this.props.openIcon : this.props.closeIcon}
    );

because it allows more freedom for the developer. What do you think?

Card

Source

lustoykov

Most helpful comment

I also have this error on creating a button in a card/cardActions section with material-ui 3.2.0

there's also a warning saying: Received true for a non-boolean attribute container (see below)

1.chunk.js:101009 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by Button)
    in Button (created by WithStyles(Button))
    in WithStyles(Button) (at ProEntityGroupGrid.js:119)
    in div (created by CardActions)
    in CardActions (created by WithStyles(CardActions))
    in WithStyles(CardActions) (at ProEntityGroupGrid.js:118)
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by CardActionArea)
    in CardActionArea (created by WithStyles(CardActionArea))
    in WithStyles(CardActionArea) (at ProEntityGroupGrid.js:93)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Card)
    in Card (created by WithStyles(Card))
    in WithStyles(Card) (at ProEntityGroupGrid.js:82)
    in div (created by GridListTile)
    in li (created by GridListTile)
    in GridListTile (created by WithStyles(GridListTile))
    in WithStyles(GridListTile) (at ProEntityGroupGrid.js:160)
    in ul (created by GridList)
    in GridList (created by WithStyles(GridList))
    in WithStyles(GridList) (at ProEntityGroupGrid.js:153)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:149)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:148)
    in I18n (at ProEntityGroupGrid.js:131)
    in ProEntityGroupGrid (created by WithStyles(ProEntityGroupGrid))
    in WithStyles(ProEntityGroupGrid) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProEntityGroupGrid)))
    in withApollo(WithStyles(ProEntityGroupGrid)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProEntityGroupGrid))))
    in withRouter(withApollo(WithStyles(ProEntityGroupGrid))) (at ShopAdminHome.js:116)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (at ShopAdminHome.js:115)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:114)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:113)
    in Query (at ShopAdminHome.js:100)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:99)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:95)
    in ShopAdminHome (created by WithStyles(ShopAdminHome))
    in WithStyles(ShopAdminHome) (at ProHome.js:192)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:191)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:182)
    in div (at ProHome.js:178)
    in I18n (at ProHome.js:174)
    in Query (at ProHome.js:162)
    in Route (at ProHome.js:142)
    in ProHome (created by WithStyles(ProHome))
    in WithStyles(ProHome) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProHome)))
    in withApollo(WithStyles(ProHome)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProHome))))
    in withRouter(withApollo(WithStyles(ProHome))) (at App.js:68)
    in Switch (at App.js:51)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:50)
    in MuiThemeProvider (at App.js:49)
    in App (created by I18n)
    in I18n (created by Translate(App))
    in Translate(App) (at index.js:48)
    in I18nextProvider (at index.js:47)
    in ApolloProvider (at index.js:46)


1.chunk.js:101009 Warning: Received `true` for a non-boolean attribute `container`.

If you want to write it to the DOM, pass a string instead: container="true" or container={value.toString()}.
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by CardActionArea)
    in CardActionArea (created by WithStyles(CardActionArea))
    in WithStyles(CardActionArea) (at ProEntityGroupGrid.js:93)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Card)
    in Card (created by WithStyles(Card))
    in WithStyles(Card) (at ProEntityGroupGrid.js:82)
    in div (created by GridListTile)
    in li (created by GridListTile)
    in GridListTile (created by WithStyles(GridListTile))
    in WithStyles(GridListTile) (at ProEntityGroupGrid.js:160)
    in ul (created by GridList)
    in GridList (created by WithStyles(GridList))
    in WithStyles(GridList) (at ProEntityGroupGrid.js:153)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:149)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:148)
    in I18n (at ProEntityGroupGrid.js:131)
    in ProEntityGroupGrid (created by WithStyles(ProEntityGroupGrid))
    in WithStyles(ProEntityGroupGrid) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProEntityGroupGrid)))
    in withApollo(WithStyles(ProEntityGroupGrid)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProEntityGroupGrid))))
    in withRouter(withApollo(WithStyles(ProEntityGroupGrid))) (at ShopAdminHome.js:116)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (at ShopAdminHome.js:115)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:114)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:113)
    in Query (at ShopAdminHome.js:100)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:99)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:95)
    in ShopAdminHome (created by WithStyles(ShopAdminHome))
    in WithStyles(ShopAdminHome) (at ProHome.js:192)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:191)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:182)
    in div (at ProHome.js:178)
    in I18n (at ProHome.js:174)
    in Query (at ProHome.js:162)
    in Route (at ProHome.js:142)
    in ProHome (created by WithStyles(ProHome))
    in WithStyles(ProHome) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProHome)))
    in withApollo(WithStyles(ProHome)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProHome))))
    in withRouter(withApollo(WithStyles(ProHome))) (at App.js:68)
    in Switch (at App.js:51)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:50)
    in MuiThemeProvider (at App.js:49)
    in App (created by I18n)
    in I18n (created by Translate(App))
    in Translate(App) (at index.js:48)
    in I18nextProvider (at index.js:47)
    in ApolloProvider (at index.js:46)

ziedHamdi on 20 Dec 2018

👍2

All 7 comments

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

oliviertassinari on 5 Aug 2017

I also have this error on creating a button in a card/cardActions section with material-ui 3.2.0

there's also a warning saying: Received true for a non-boolean attribute container (see below)

1.chunk.js:101009 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by Button)
    in Button (created by WithStyles(Button))
    in WithStyles(Button) (at ProEntityGroupGrid.js:119)
    in div (created by CardActions)
    in CardActions (created by WithStyles(CardActions))
    in WithStyles(CardActions) (at ProEntityGroupGrid.js:118)
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by CardActionArea)
    in CardActionArea (created by WithStyles(CardActionArea))
    in WithStyles(CardActionArea) (at ProEntityGroupGrid.js:93)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Card)
    in Card (created by WithStyles(Card))
    in WithStyles(Card) (at ProEntityGroupGrid.js:82)
    in div (created by GridListTile)
    in li (created by GridListTile)
    in GridListTile (created by WithStyles(GridListTile))
    in WithStyles(GridListTile) (at ProEntityGroupGrid.js:160)
    in ul (created by GridList)
    in GridList (created by WithStyles(GridList))
    in WithStyles(GridList) (at ProEntityGroupGrid.js:153)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:149)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:148)
    in I18n (at ProEntityGroupGrid.js:131)
    in ProEntityGroupGrid (created by WithStyles(ProEntityGroupGrid))
    in WithStyles(ProEntityGroupGrid) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProEntityGroupGrid)))
    in withApollo(WithStyles(ProEntityGroupGrid)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProEntityGroupGrid))))
    in withRouter(withApollo(WithStyles(ProEntityGroupGrid))) (at ShopAdminHome.js:116)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (at ShopAdminHome.js:115)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:114)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:113)
    in Query (at ShopAdminHome.js:100)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:99)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:95)
    in ShopAdminHome (created by WithStyles(ShopAdminHome))
    in WithStyles(ShopAdminHome) (at ProHome.js:192)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:191)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:182)
    in div (at ProHome.js:178)
    in I18n (at ProHome.js:174)
    in Query (at ProHome.js:162)
    in Route (at ProHome.js:142)
    in ProHome (created by WithStyles(ProHome))
    in WithStyles(ProHome) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProHome)))
    in withApollo(WithStyles(ProHome)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProHome))))
    in withRouter(withApollo(WithStyles(ProHome))) (at App.js:68)
    in Switch (at App.js:51)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:50)
    in MuiThemeProvider (at App.js:49)
    in App (created by I18n)
    in I18n (created by Translate(App))
    in Translate(App) (at index.js:48)
    in I18nextProvider (at index.js:47)
    in ApolloProvider (at index.js:46)


1.chunk.js:101009 Warning: Received `true` for a non-boolean attribute `container`.

If you want to write it to the DOM, pass a string instead: container="true" or container={value.toString()}.
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by CardActionArea)
    in CardActionArea (created by WithStyles(CardActionArea))
    in WithStyles(CardActionArea) (at ProEntityGroupGrid.js:93)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Card)
    in Card (created by WithStyles(Card))
    in WithStyles(Card) (at ProEntityGroupGrid.js:82)
    in div (created by GridListTile)
    in li (created by GridListTile)
    in GridListTile (created by WithStyles(GridListTile))
    in WithStyles(GridListTile) (at ProEntityGroupGrid.js:160)
    in ul (created by GridList)
    in GridList (created by WithStyles(GridList))
    in WithStyles(GridList) (at ProEntityGroupGrid.js:153)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:149)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProEntityGroupGrid.js:148)
    in I18n (at ProEntityGroupGrid.js:131)
    in ProEntityGroupGrid (created by WithStyles(ProEntityGroupGrid))
    in WithStyles(ProEntityGroupGrid) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProEntityGroupGrid)))
    in withApollo(WithStyles(ProEntityGroupGrid)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProEntityGroupGrid))))
    in withRouter(withApollo(WithStyles(ProEntityGroupGrid))) (at ShopAdminHome.js:116)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (at ShopAdminHome.js:115)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:114)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:113)
    in Query (at ShopAdminHome.js:100)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:99)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ShopAdminHome.js:95)
    in ShopAdminHome (created by WithStyles(ShopAdminHome))
    in WithStyles(ShopAdminHome) (at ProHome.js:192)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:191)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at ProHome.js:182)
    in div (at ProHome.js:178)
    in I18n (at ProHome.js:174)
    in Query (at ProHome.js:162)
    in Route (at ProHome.js:142)
    in ProHome (created by WithStyles(ProHome))
    in WithStyles(ProHome) (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithStyles(ProHome)))
    in withApollo(WithStyles(ProHome)) (created by Route)
    in Route (created by withRouter(withApollo(WithStyles(ProHome))))
    in withRouter(withApollo(WithStyles(ProHome))) (at App.js:68)
    in Switch (at App.js:51)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:50)
    in MuiThemeProvider (at App.js:49)
    in App (created by I18n)
    in I18n (created by Translate(App))
    in Translate(App) (at index.js:48)
    in I18nextProvider (at index.js:47)
    in ApolloProvider (at index.js:46)

ziedHamdi on 20 Dec 2018

👍2

I got this error
index.js:1437 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. in button (created by ButtonBase) in ButtonBase (created by WithStyles(ButtonBase)) in WithStyles(ButtonBase) (created by Button) in Button (created by WithStyles(Button)) in WithStyles(Button) (at CreateEditTodo.js:69) in div (created by CardContent) in CardContent (created by WithStyles(CardContent)) in WithStyles(CardContent) (at CreateEditTodo.js:39) in button (created by ButtonBase) in ButtonBase (created by WithStyles(ButtonBase)) in WithStyles(ButtonBase) (created by CardActionArea) in CardActionArea (created by WithStyles(CardActionArea)) in WithStyles(CardActionArea) (at CreateEditTodo.js:37) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by Card) in Card (created by WithStyles(Card)) in WithStyles(Card) (at CreateEditTodo.js:36) in form (at CreateEditTodo.js:35) in CreateEditTodo (created by WithStyles(CreateEditTodo)) in WithStyles(CreateEditTodo) (created by Context.Consumer) in Route (at TodoContainer.js:8) in TodoContainer (at MainLayout.js:21) in Suspense (at MainLayout.js:20) in Route (at MainLayout.js:19) in div (created by Grid) in Grid (created by WithStyles(Grid)) in WithStyles(Grid) (at MainLayout.js:16) in div (created by Grid) in Grid (created by WithStyles(Grid)) in WithStyles(Grid) (at MainLayout.js:14) in MainLayout (created by WithStyles(MainLayout)) in WithStyles(MainLayout) (at App.js:12) in Router (created by BrowserRouter) in BrowserRouter (at App.js:10) in div (at App.js:9) in App (at src/index.js:7) console.<computed> @ index.js:1437 warningWithoutStack @ react-dom.development.js:520 validateDOMNesting @ react-dom.development.js:9018 createInstance @ react-dom.development.js:9137 completeWork @ react-dom.development.js:17637 completeUnitOfWork @ react-dom.development.js:20108 performUnitOfWork @ react-dom.development.js:20315 workLoop @ react-dom.development.js:20326 renderRoot @ react-dom.development.js:20406 performWorkOnRoot @ react-dom.development.js:21363 performWork @ react-dom.development.js:21273 performSyncWork @ react-dom.development.js:21247 requestWork @ react-dom.development.js:21102 retryTimedOutBoundary @ react-dom.development.js:20782 wrapped @ scheduler-tracing.development.js:177 Promise.then (async) (anonymous) @ react-dom.development.js:18895 commitWork @ react-dom.development.js:18885 commitAllHostEffects @ react-dom.development.js:19615 callCallback @ react-dom.development.js:147 invokeGuardedCallbackDev @ react-dom.development.js:196 invokeGuardedCallback @ react-dom.development.js:250 commitRoot @ react-dom.development.js:19860 (anonymous) @ react-dom.development.js:21446 unstable_runWithPriority @ scheduler.development.js:255 completeRoot @ react-dom.development.js:21445 performWorkOnRoot @ react-dom.development.js:21368 performWork @ react-dom.development.js:21273 performSyncWork @ react-dom.development.js:21247 requestWork @ react-dom.development.js:21102 scheduleWork @ react-dom.development.js:20915 scheduleRootUpdate @ react-dom.development.js:21610 updateContainerAtExpirationTime @ react-dom.development.js:21636 updateContainer @ react-dom.development.js:21704 push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22017 (anonymous) @ react-dom.development.js:22169 unbatchedUpdates @ react-dom.development.js:21492 legacyRenderSubtreeIntoContainer @ react-dom.development.js:22165 render @ react-dom.development.js:22240 ./src/index.js @ index.js:7 __webpack_require__ @ bootstrap:786 fn @ bootstrap:149 0 @ serviceWorker.js:135 __webpack_require__ @ bootstrap:786 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1

anyone knows the solutions?

dev-parvej on 6 May 2019

@Akashaj09 Do you have a reproduction example?

oliviertassinari on 6 May 2019

Here's my code for it:

    renderEntity(entityGroup, t) {
        const {selected, classes, onEntityGroupOver, onEntityGroupOut} = this.props
        const {_id, name, userList, asEntityId} = entityGroup.node
        return (<Link href={{
            pathname: '/pro/eg/issues',
            query: {egId: _id, entityId:asEntityId, state:"OPEN"}
        }} as={`/pro/eg/issues/OPEN/${_id}/`}>
            <Card key={_id} className={classes.card}
                        onMouseOver={() => {
                            onEntityGroupOver(_id)
                        }}
                        onMouseOut={() => {
                            onEntityGroupOut(_id)
                        }}
            >
                <CardActionArea direction="column"
                                                className={classNames(classes.entityGroup, {[classes.entityGroupSelected]: selected != null && selected._id === _id})}>
                    <CardMedia
                            component="img"
                            alt={name}
                            className={classes.media}
                            height="140"
                            image="/static/images/service.svg"
                            title="Contemplative Reptile"
                    />
                    <CardContent>
                        <Grid container direction="column" className={classes.item}>
                            <Grid item className="name"><Typography gutterBottom variant="h6">{name}</Typography></Grid>
                            <Grid item container>
                                {userList.map(({userId, userName, userPicId, role, state}) => (<Grid item container className={classes.groupUser} key={userId}>
                                    <Grid item>
                                        {userName}
                                    </Grid>
                                    <Typography variant="caption" className={classes.groupUserRole}>{role}</Typography>
                                </Grid>))}
                            </Grid>
                        </Grid>
                    </CardContent>
                    <CardActions>
                        <Button size="small" color="primary">
                            {t('common.buttons.editShop')}
                        </Button>
                    </CardActions>
                </CardActionArea>
            </Card>
        </Link>)
    }

ziedHamdi on 16 Jul 2019

It happens also with Tab in the Tabs component.
I have an IconButton inside the Tab because I need a "Favourites" button per Tab.

The error (not in Code because it loses formatting):

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
in button (created by ForwardRef(ButtonBase))
in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
in WithStyles(ForwardRef(IconButton)) (at Navigation.tsx:151)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Navigation.tsx:145)
in span (created by ForwardRef(Tab))
in button (created by ForwardRef(ButtonBase))
in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Tab))
in ForwardRef(Tab) (created by WithStyles(ForwardRef(Tab)))
in WithStyles(ForwardRef(Tab)) (at Navigation.tsx:142)
in div (created by ForwardRef(Tabs))
in div (created by ForwardRef(Tabs))
in div (created by ForwardRef(Tabs))
in ForwardRef(Tabs) (created by WithStyles(ForwardRef(Tabs)))
in WithStyles(ForwardRef(Tabs)) (at Navigation.tsx:55)
in div (at Navigation.tsx:54)
in TabsList (at Navigation.tsx:218)
in Navigation (at Main.tsx:97)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Main.tsx:96)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Main.tsx:95)
in Main (at MainTemplate.tsx:392)
in div (created by ForwardRef(Container))
in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
in WithStyles(ForwardRef(Container)) (at MainTemplate.tsx:387)
in MasterTemplate (at App.tsx:18)
in MuiPickersUtilsProvider (at App.tsx:15)