Warning: React does not recognize the transitionDuration prop on a DOM element.

[OliverJEvans]

When using the demo code in a new react project the following error appears in the console.

No adverse effects of this warning, the carousel still works as expected.

---

Test repo: https://github.com/OliverJEvans/material-auto-rotating-carousel-issue

Versions
@material-ui/core@4.3.2
material-auto-rotating-carousel@3.0.1
react@16.9.0
react-dom@16.9.0
react-scripts@3.1.0
react-swipeable-views@0.13.3

Error

Warning: React does not recognize the `transitionDuration` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `transitionduration` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef(SimpleBackdrop))
    in ForwardRef(SimpleBackdrop) (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by AutoRotatingCarousel)
    in AutoRotatingCarousel (created by WithStyles(AutoRotatingCarousel))
    in WithStyles(AutoRotatingCarousel) (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:5)

App.js

import React from 'react';
import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';
import { red, blue, green } from '@material-ui/core/colors';


function App() {
  return (
    <div style={{ position: 'relative', width: '100%', height: 500 }}>
      <AutoRotatingCarousel
        label='Get started'
        open
        style={{ position: 'absolute' }}
      >
        <Slide
          media={<img src='http://www.icons101.com/icon_png/size_256/id_79394/youtube.png' />}
          mediaBackgroundStyle={{ backgroundColor: red[400] }}
          style={{ backgroundColor: red[600] }}
          title='This is a very cool feature'
          subtitle='Just using this will blow your mind.'
        />
        <Slide
          media={<img src='http://www.icons101.com/icon_png/size_256/id_80975/GoogleInbox.png' />}
          mediaBackgroundStyle={{ backgroundColor: blue[400] }}
          style={{ backgroundColor: blue[600] }}
          title='Ever wanted to be popular?'
          subtitle='Well just mix two colors and your are good to go!'
        />
        <Slide
          media={<img src='http://www.icons101.com/icon_png/size_256/id_76704/Google_Settings.png' />}
          mediaBackgroundStyle={{ backgroundColor: green[400] }}
          style={{ backgroundColor: green[600] }}
          title='May the force be with you'
          subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
        />
      </AutoRotatingCarousel>
    </div>
  );
}

export default App;

[leMaik]

Oh wow, great to hear that this works with Material-UI v4 without even updating it. 😅 Seems like some prop name changed, I'll look into this.

[OliverJEvans]

Oh wow, didn't even realise this wasn't built for v4 to be honest.

---

While we're here then, in the test repo there were a few other warnings in the console relating to now renamed lifecycle hooks. I didn't mention these initially as they didn't appear on my main project. Looking back I should have realised that this was because it wasn't built for v4. Other than this everything still seems to work great :)
These originate from a third-party plugin 'react-swipeable-views-utils' and an issue has already been filed regarding these warnings - oliviertassinari/react-swipeable-views#534

[OliverJEvans]

So I've had a look to see if I could solve this myself. The issue is passing the BackdropProps into the Modal component.

material-auto-rotating-carousel/src/AutoRotatingCarousel.js

Line 191 in 8af2f46

BackdropProps={ModalProps ? { transitionDuration, ...ModalProps.BackdropProps } : { transitionDuration }}

• The prop name has not changed between v3 & v4
• The docs still imply the that you pass the transitionDuration prop as you did in v3.
• The transitionDuration prop passes through to the backdrop the same between v3 and v4.
• The type for the prop has changed slightly (additional appear type) but still keeps exit and enter, so shouldn't cause an issue.
• Passing an {entry: X, exit: Y} instead of a named object works in v4 but breaks v3. This suggests the backdrop component itself has changed between the versions.

I'm stumped with this one.

[OliverJEvans]

Resolved in PR: #67