The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
There are a couple of likely reasons this warning could be appearing:
-
Are you using
{...this.props}
orcloneElement(element, this.props)
? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component. -
You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
-
React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered.
To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example:
Bad: Unexpected layout
prop is forwarded to the div
tag.
function MyDiv(props) {
if (props.layout === 'horizontal') {
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
return <div {...props} style={getHorizontalStyle()} />
} else {
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
return <div {...props} style={getVerticalStyle()} />
}
}
Good: The spread operator can be used to pull variables off props, and put the remaining props into a variable.
function MyDiv(props) {
const { layout, ...rest } = props
if (layout === 'horizontal') {
return <div {...rest} style={getHorizontalStyle()} />
} else {
return <div {...rest} style={getVerticalStyle()} />
}
}
Good: You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original this.props
object, since that object should be considered immutable.
function MyDiv(props) {
const divProps = Object.assign({}, props);
delete divProps.layout;
if (props.layout === 'horizontal') {
return <div {...divProps} style={getHorizontalStyle()} />
} else {
return <div {...divProps} style={getVerticalStyle()} />
}
}
While refactoring to remove the warnings introduced by this change, I've come across a situation where I don't quite know how to get around it. I'm passing props on the children of my element (in my case, an Animation element like ReactCSSTransition) to be used by the parent as it renders them. I want to be able to remove these props before rendering the child so I won't see any of the warnings about unknown props. I just can't work out a way to make this happen.
An example:
In this case, because React.cloneElement does a shallow clone of props and 'foo' is still on the (immutable) props of the child - 'foo' will still be on the props of the cloned child. I also tried making foo = undefined and null, but the warning still picks this up (as it's only looking at keys).
I could potentially create the element via something like
<child.type {...clonedProps}>{child.children}</child.type>
but I don't believe this would would (nor is it a neat solution) as it'll strip refs and any other fields that might be introduced/I might not be aware of.
Anyone got a proper way to achieve this?