React Animation's ReactCSSTransitionGroup and CSSTransitionGroup cannot work as in the sample code

Question

I am trying the sample code for React Animation:

1. https://reactjs.org/docs/animation.html
2. https://github.com/reactjs/react-transition-group/tree/v1-stable

Demo:

https://codesandbox.io/s/dark-forest-ofzfr?file=/src/App.js

        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </CSSTransitionGroup>

It doesn't think App exists in index.js. But if the CSSTransitionGroup is replaced by some static text, then it works (without any animation effect):

https://codesandbox.io/s/blue-dust-j0y57?file=/src/App.js

The same with ReactCSSTransitionGroup:
https://codesandbox.io/s/quizzical-franklin-j2hhp?file=/src/App.js

How can it work?

Answer 1

You should use TransitionGroup and CSSTransition instead of ReactCSSTransitionGroup and CSSTransitionGroup . The code looks like below

import React from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ["hello", "world", "click", "me"] };
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([prompt("Enter some text")]);
    this.setState({ items: newItems });
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({ items: newItems });
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <CSSTransition
        key={i}
        classNames="example"
        timeout={{ enter: 500, exit: 300 }}
      >
        <div key={item} onClick={() => this.handleRemove(i)}>
          {item}
        </div>
      </CSSTransition>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <TransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </TransitionGroup>
      </div>
    );
  }
}

export default App;

styles.css

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.example-exit {
  opacity: 1;
}
.example-exit.example-exit-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

you can see here in codesandbox, check this doc for more information about migration from v1 to v2

Answer 2

A quick answer: React's official animation docs as of 2021 April points to the v1 documentation, but if we try the solution there with the current react-transition-group, then it would not work. The reason is that from v2 forward, to the current v4 release, it is not backward compatible with v1.

Therefore, if we are using it or exploring to use it, go to the docs and immediately skip any info that is related to v1.