Animating a todo list with ReactCSSTransitionGroup

In this recipe, we are going to animate a todo list using ReactCSSTransitionGroup.

 

Getting Ready

For this recipe, we need to install the react-addons-css-transition-group package:

npm install react-addons-css-transition-group

How to do it...

We are going to make a Todo list with some animations:

1. First, let's create our Todo component:

import React, { Component } from 'react';
import uuidv4 from 'uuid/v4';
import List from './List';
import './Todo.css';

class Todo extends Component {
constructor() {
super();

// Initial state...
    this.state = {
      task: '',
      items: []
    };
  }

componentWillMount() {
// Setting default tasks...
    this.setState({
items: [
        {
id: uuidv4(),
task: 'Default Task 1',
completed: false
        },
        {
id: uuidv4(),
task: 'Default Task 2',
completed: true
        },
        {
id: uuidv4(),
task: 'Default Task 3',
completed: false
        }
      ]
    });
  }

handleOnChange = e => {
const...