Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm trying to create a wrapper component around the react-router-dom NavLink component.

I would like my custom component to accept all of NavLinks props, and proxy them down to NavLink.

However when I do this, I'm getting:

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

A working demo of the issue can be found here:

  • https://codesandbox.io/s/w0n49rw7kw
like image 418
Nicolas Widart Avatar asked Mar 19 '18 08:03

Nicolas Widart


People also ask

Why is my react prop undefined?

The "Cannot read property 'props' of undefined" error occurs when a class method is called without having the correct context bound to the this keyword. To solve the error, define the class method as an arrow function or use the bind method in the classes' constructor method.

Does react interact with DOM?

React will assign the current property with the DOM element when the component mounts, and assign it back to null when it unmounts. ref updates happen before componentDidMount or componentDidUpdate lifecycle methods.

What is shouldForwardProp?

shouldForwardProp ( (prop: string) => bool [optional]): Indicates whether the prop should be forwarded to the Component .


1 Answers

There is a way to overcome that is using:

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

So your ...rest will never contain staticContext

like image 194
Khoa Avatar answered Sep 19 '22 17:09

Khoa