score:86

Accepted answer

There is a way to overcome that is using:

const { to, staticContext, ...rest } = this.props;

So your ...rest will never contain staticContext

score:-2

I got the same issue when passing data in chaild component with camelCase 
property.

Warning: React does not recognize the `moreInfo` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, 
spell it as lowercase `moreinfo` instead. If you accidentally passed it 
from a parent component, remove it from the DOM element.

 <CenteredModal
      moreInfo={viewType}
 />

 To fix that error, i used all lowercase letters for property.
 <CenteredModal
      moreinfo={viewType}
 />

score:0

If someone has this issue with react-admin, check if you don't have a Link as a child of Admin. Like this:

<Admin layout={props => <Layout/>}>
  <Link to="/something">something</Link> <-- causing issue
</Admin>

Just move it to another component. For instance, inside the Layout.

score:3

The given answer by the React docs was not quite good enough for my situation, so I found/developed one which isn't perfect, but is at least not so much of a hassle.

You can see the Q/A in which it arose here: What is Reacts function for checking if a property applies?

The gist is, use a function to pick the bad props out for you.

const SPECIAL_PROPS = [
    "key",
    "children",
    "dangerouslySetInnerHTML",
];

const defaultTester = document.createElement("div")
function filterBadProps(props: any, tester: HTMLElement = defaultTester) {
    if(process.env.NODE_ENV !== 'development') { return props; }

    // filter out any keys which don't exist in reacts special props, or the tester.
    const out: any = {};
    Object.keys(props).filter((propName) => 
        (propName in tester) || (propName.toLowerCase() in tester) || SPECIAL_PROPS.includes(propName)
    ).forEach((key) => out[key] = props[key]);

    return out;
}

Personally, I felt that the warning was completely useless in the first place, so I added a line which skips the check entirely when not in development mode (and warnings are suppressed). If you feel that the warnings have merit, just remove the line:

if(process.env.NODE_ENV !== 'development') { return props; }

You can use it like this:

public render() {
    const tooManyProps = this.props;
    const justTheRightPropsForDiv = filterBadProps(tooManyProps);
    const justTheRightPropsForSpan = filterBadProps(tooManyProps, document.createElement("span"));

    return (<div {...justTheRightPropsForDiv}>
        <span {...justTheRightPropsForSpan} />
    </div>)
}

score:5

This happens because you probably used {...props} somewhere in your component.

Example from React:

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

We grab layout separately so that it won't be contained in {...rest}.

score:17

This is a common problem with a simple solution as documented in the React documentation:

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.

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()} />
  }
}

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()} />
  }
}

Related Query

More Query from same tag