React Cookbook

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 { target: { value } } = e;    // Updating our task state with the input value...    this.setState({      task: value    });