using CSSTransitionGroup with react-rails version 2.1.0

[KI12]

Help us help you! Please choose one:

• My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• I have another issue to discuss.

---

I know that ReactTransitionGroup and ReactCSSTransitionGroup are both deprecated as of React v15.5.0

I try to use CSSTransitionGroup in react-rails version 2.1.0 (react ver.15)

So what the best practice for using CSSTransitionGroup with react-rails

---

Here is the way i have try but it didn't work

Use with Asset Pipeline

install CSSTransitionGroup via npm like #413

in application.js

//= require jquery
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .

// Setup React in global scope
var React = window.React = global.React = require('react');
var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom');

in component.js

//= require_tree ./components

var CSSTransitionGroup = require('react-transition-group/CSSTransitionGroup');

console.log(CSSTransitionGroup); //the function is found when i log here

in TestComponent.jsx

 render() {
 return (
 
 <CSSTransitionGroup
 transitionName="example"
 transitionAppear={true}
 transitionAppearTimeout={500}
 transitionEnter={false}
 transitionLeave={false}>
 <img className="stuff_canvas" src={this.state.image.src} />
 </CSSTransitionGroup>

 );
 }

Browser log

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm

and

instead.LayerElements.self-a75a689….js?body=1:57 Uncaught ReferenceError: CSSTransitionGroup is not defined

THANK YOU.

[nekogami]

Doesn't activating addons in your application.rb with
config.react.addons = true

and then use:

 <React.addons.CSSTransitionGroup
 component="div"
 transitionName="collapse"
 transitionEnterTimeout={252.52}
 transitionLeaveTimeout={252.52}>

 { this.renderStuff() }
 </React.addons.CSSTransitionGroup>

works ?
(Old issue I know, but I just found it :p)

[BookOfGreg]

Hi @KI12 and @nekogami ,

Is this issue solved with the latest react-rails v2.3 which updates React and it's addons to fix these depreciation warnings? #798
I'll close for now but if there's anything I can do along these lines let me know and I'll reopen.

[nekogami]

What I wrote was the code I was using then on production. I since switched job and is not using React atm so I can't give you a feedback for now.