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.