plod plod - 10 days ago 6
React JSX Question

Unknown prop `openIcon` on material-ui card with react

When trying to apply the openIcon property on a CardHeader in the material-ui library, I receive the following warning:

"Warning: Unknown prop `openIcon` on <div> tag. Remove this prop from the element. For details, see [link to react docs]
in div (created by CardHeader)
in CardHeader (created by SpoilerCard)
in div (created by Card)
in div (created by Paper)
in Paper (created by Card)
in Card (created by SpoilerCard)
in SpoilerCard (created by SpoilerCardContainer)
in SpoilerCardContainer (created by SpoilerCardList)
in div (created by SpoilerCardList)
in div (created by SpoilerCardList)
in SpoilerCardList (created by SpoilerCardListContainer)
in SpoilerCardListContainer (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App"


Although the message shown is a warning and not an error, the icon on the card does not change. It remains the default down arrowhead while unexpanded and the up arrowhead while expanded.
I receive the same error while trying to use the closeIcon property.

The code for the component is:

import React from "react";
const PropTypes = React.PropTypes;
import {Card, CardHeader, CardText} from "material-ui/Card";
import IconButton from "material-ui/IconButton";
import ContentAdd from "material-ui/svg-icons/content/add";

const SpoilerCard = props => (
<Card style={{paddingBottom: 16}}>
<CardHeader
title={props.title}
subtitle={props.isActive ? "Active" : "Inactive"}
actAsExpander={true}
showExpandableButton={true}
style={{paddingBottom: 0}}
openIcon={
<IconButton>
<ContentAdd />
</IconButton>
}
/>
<CardText expandable={true} style={{paddingTop: 0, paddingBottom: 0}}>
</CardText>
</Card>
);

export default SpoilerCard;


Any idea why I'm receiving this error?

EDIT: I investigated a little further. Using React Devtools on Firefox displayed following component hierarchy:
Component hierarchy

The openIcon property is being incorrectly assigned to the child div instead of the CardExpandable component.

Answer

I just checked from material-ui 16.0.2 this property exists. So if you are using 16.0.1 or lower you will get this warning. The reason is because of this code snippet.

const {
  actAsExpander, // eslint-disable-line no-unused-vars
  avatar: avatarProp,
  children,
  expandable, // eslint-disable-line no-unused-vars
  showExpandableButton, // eslint-disable-line no-unused-vars
  style,
  subtitle,
  subtitleColor, // eslint-disable-line no-unused-vars
  subtitleStyle,
  textStyle,
  title,
  titleColor, // eslint-disable-line no-unused-vars
  titleStyle,
  ...other,
} = this.props;

And this:

<div {...other} style={prepareStyles(Object.assign(styles.root, style))}>

openIcon is included in ...other because it was not extracted from this.properties. This causes that openIcon is propagated to div which is a unkonw prop. Proper explanation in documentation https://facebook.github.io/react/warnings/unknown-prop.html

So if you use older version of the library you will get his warning.

Comments