3

I am using the redux-form-material-ui DatePicker as described in the docs. However it just throws these errors.

React does not recognize the transitionAppear, transitionAppearTimeout, transitionEnter and transitionEnterTimeout props on DOM element...

I checked it in the developer tools and these transition properties are actually passing down to the child div from it's parent CSSTransitionGroup.

Due to this, the DatePicker dialog is not working as expected. I have already spent more than a day on this but can't seem to get it working. Please help me out!

enter image description here

dsaket
  • 1,827
  • 2
  • 19
  • 30
  • Can you try with `material-ui@0.20.X`? – Tarun Lalwani Feb 24 '18 at 21:08
  • Yeah I started with that only but that didn't work – dsaket Feb 26 '18 at 11:49
  • I know you said you've implemented this just like the example in the documentation, but can you share some of your code? It would be great if you'd reproduce this in something like [codesandbox](https://codesandbox.io/). – Ken Gregory Feb 28 '18 at 15:03
  • These warnings have happened because you pass the props (transitionAppear, transitionAppearTimeout...) to DOM element! Something like this -
    DOM elements can't recognize these properties. In my opinion, your mistake is in another place because on your screenshot I can see just 4 warnings, but there are on console 6 errors!     – Ihor Skliar Mar 02 '18 at 14:50

1 Answers1

3

The exact Bug you are reporting is discussed here: "Unknown props transitionAppear, transitionAppearTimeout, transitionEnter, transitionEnterTimeout and ripples #9328".

User kaytrance said: "It turned out that material-ui uses react-transition-group v1.x, but a chart library that I use has dependency on v2.x. So I had to put an older version of chart library in order to get rid of that errors.".

A further comment from user kevincolten was: "You can bring in both react-transition-groups in your package.json

"react-transition-group": "^1.2.0",
"react-transition-group-v2": "npm:react-transition-group",

".

The example given in your question runs fine on my browser.

Since you haven't provided your code (and modifications?) or a CodeSandbox (which is OK for me) I had to use a different example to reproduce the same error and determine the appropriate fix.

I get from this sandbox:

Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

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.

in a (created by Link)
in Link
in CourseLink (created by Route)
in Route (created by withRouter(CourseLink))
in withRouter(CourseLink) (created by Course)
in li (created by Course)
in ul (created by Course)
in div (created by Course)
in Course (created by Route)
in Route (created by BasicExample)
in div (created by BasicExample)
in Router (created by BrowserRouter)
in BrowserRouter (created by BasicExample)
in BasicExample

No Results

That error was reported here "React does not recognize the staticContext prop on a DOM element".

The suggested fix from user timdorr is:

"You should do what NavLink does and wrap it in a Route inside CourseLink: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js ".

The Animation-Add-on isn't recognized.

That is due to the incorrect dependency, loading both is easier than fixing the one.

Community
  • 1
  • 1
Rob
  • 1,487
  • 2
  • 25
  • 29