React wrapper: React does not recognize the `staticContext` prop on a DOM element

There is a way to overcome that is using:

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

So your ...rest will never contain staticContext

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

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