¿Cómo agregar una clase CSS cada vez que el componente se actualiza en ReactJS?

Si queremos actualizar/agregar la clase CSS cuando el componente se actualice o cambie el estado/los accesorios de los componentes, entonces tenemos que aplicar condicionalmente el CSS en función del valor del estado/los accesorios. 

Aquí hay un ejemplo simple de agregar clases CSS condicionalmente.

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

La clase oculta se aplicará cuando el valor de la bandera sea verdadero; de lo contrario, solo se aplicará la clase CSS de cuadro.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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;

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

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Como podemos ver en el resultado anterior, el cuadro desaparecerá cuando la clase CSS oculta se agregue al elemento HTML en función del valor actualizado del estado.