How to add a CSS class whenever the component is updated in ReactJS ?

If we want to update/add CSS class when the component is updated or the state/props of components change then we have to conditionally apply the CSS based on the state/props value. 

Here is a simple example of adding CSS classes conditionally.

 <div className={`box ${flag === false ? "" : "hidden"}`}>

The class hidden will be applied when the value of the flag is true otherwise only the box CSS class will be applied.

Creating React Application:

• Step 1: Create a React application using the following command:

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React, { Component } from 'react';
import styles from './index.css';

class App extends Component {
    state = {
        flag: true
    };

    handleUpdate = () => {
        this.setState(prevstate => ({ flag: !prevstate.flag }));
    };

    render() {
        const flag = this.state.flag;
        return (
            <div>
                <button onClick={this.handleUpdate}>Show Box</button>
                <div className={`box ${flag === false ? "" : "hidden"}`}>
                    <p>click on button to hide and show the box</p>
                </div>
            </div>
        );
    }
}

export default App;

index.css

.box{
  width: 100px;
  height: 200;
  padding: 20px;
  border: 1px solid black;
}
.hidden {
  display: none;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

As we can see from the above output the box will disappear when the CSS class hidden will be added to the HTML element based on the updated value of the state.