Why Is React-addons-css-transition-group Not Working Here?

import CSSTransitionGroup from 'react-addons-css-transition-group' ; class VariableDefinitions extends Component { render() { const { idToVarStates } = this.props; co

Solution 1:

The package has been deleted.

First,here is the introduction about react-addons-css-transition-group in npm package.

react-addons-css-transition-group The code in this package has moved. We recommend you to use CSSTransitionGroup from react-transition-group instead.

So,the react-addons-css-transition-group package is not recommended to use now.It is recommended to use react-transition-group.

---

The page may be crushed.

Second,Object.keys(idToVarStates).map will render too many TransitionGroup.And make the page crush.

---

Change the CSSTransition to this.

<TransitionGroup className="todo-list">
                {idToVarStates.map(({ id, text }) => (
                    <CSSTransitionkey={id}timeout={500}classNames="fade"
                    ><VariableDefinitiontext={text}key={id}filter={this.props.filter} {...this.props}/></CSSTransition>
                ))}
            </TransitionGroup>

---

Working code

I create an example for react-transition-group.Here is the result.

And the working code is in here: https://codesandbox.io/s/github/stackOverflow166/variable

Solution 2:

Simple answer. The package has been moved. According to the npm page for react-addons-css-transition-group.

The code in this package has moved. We recommend you to use CSSTransitionGroup from react-transition-group instead.

Try uninstalling your current package by running npm uninstall react-addons-css-transition-group. Then install the correct package with:

npm i react-transition-group

Change your imports where necessary and wrap your CSSTransitionGroup with <TransitionGroup>. Try that.

You can also walkthrough this (found on the github page of react-transition-group) migration guide to help you along.

Hope this helps.