[CardTitle] Unwanted warnings on CardTitle with actAsExpander

[hugocaillard]

Problem description

When using CardTitle as a card expander I get this React warning in the console:

Warning: Unknown props `actAsExpander`, `showExpandableButton` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardTitle)
    in CardTitle

And also on expandable CardText:

Warning.js:44 Warning: Unknown prop `expandable` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardText)
    in CardText

It works just fine though.

Steps to reproduce

<Card>
  <CardTitle
    title='...'
    actAsExpander
    showExpandableButton
  />
  <CardText expandable>
  </CardText>
</Card>

Versions

• Material-UI: material-ui@0.15.2
• React: react@15.2.1
• Browser: Chrome Version 51.0.2704.106

[ztittle]

I'm having this issue as well. Very annoying as we are trying to stomp out all react warnings.

[jsamr]

Same here ! material ui 0.15.2, chromium 51.0.2704.79, react 0.15.2

[arunkarottu]

I'm using a temporary fix that seems to be working for the time being. To fix the error on CardText, for instance, open node_modules/material-ui/Card/CardText.js.

Change line 59 from this:

_extends({}, this.props, { style: prepareStyles(rootStyle) }),

to this:

_extends({}, { style: prepareStyles(rootStyle) }),

[hugocaillard]

Would you do a PR with that ?

EDIT: well, it actually doesn't really solve the problem, it's really temporary indeed

[siemato]

From React documentation:
However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered.

So it should throw the warning but the custom attribute shouldn't get into the DOM during production mode.

@arunkarottu: Removing the this.props not only gets rid of the custom DOM attributes but all of the valid DOM attributes except for the styles as well, which you might want to inject. As I see it, Material UI uses the property on the JS side but then we are injecting all props into the DOM, which is indeed not needed.

A better temporary solution would be a tempObject, get rid of the Key since it isnt't doing anything and pass the tempObject to the DOM.

I'll get into this tomorrow.

[siemato]

okay, this did the job for me:

function omit(currentProps) {
    var propsCopy = Object.assign({}, currentProps);
    if (propsCopy.expandable != undefined){delete propsCopy.expandable;}
    return propsCopy;
}

and

_extends({}, omit(this.props), { style: prepareStyles(rootStyle) }),

this solution still is kind of ugly but it is less intrusive

[hugocaillard]

It's just a solution to remove the warnings, and we have to do it manually for each props, i did that in CardTitle :

function omit(currentProps) {
  var propsCopy = Object.assign({}, currentProps);
  ['actAsExpander', 'showExpandableButton'].forEach(p => {
    delete propsCopy[p]
  })
  return propsCopy;
}

Still, it would be great to have a true fix

[siemato]

this problem is linked to #4594 as well.

[oliviertassinari]

That issue should have been fixed by #4675 and #4603. Thanks for the help.