React Cookbook

Basic animation – implementing componentWillUpdate

In this example, we are going to learn how to use componentWillUpdate:

1. componentWillUpdate allows you to manipulate a component just before it receives new props or a new state. It is typically used for animations. Let's create a basic animation (fade in/fade out) to see how to use it:

  import React, { Component } from 'react';  import './Animation.css';  class Animation extends Component {    constructor() {      super();      this.state = {        show: false      };    }    componentWillUpdate(newProps, newState) {      if (!newState.show) {        document.getElementById('fade').style = 'opacity: 1;';      } else {        document.getElementById('fade').style = 'opacity: 0;';      }    }    toggleCollapse = () => {      this.setState({        show: !this.state. ...