¿Cómo implementar alternar usando ReactJS?

Si queremos implementar la funcionalidad de alternancia en un botón, entonces podemos tener estados en nuestro componente que serán verdaderos o falsos y, según el valor del estado, podemos implementar la funcionalidad de alternancia. Cuando hacemos clic en el botón y el valor actual del estado es verdadero, lo cambiamos a falso y viceversa. Cuando cambiamos el estado, el componente se volverá a representar y, según el valor del estado, se mostrará el contenido.

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: 

Ejemplo: aquí crearemos un componente de botón para alternar, también usaremos la palabra clave JavaScript this .

import React from 'react'
   
class Counter extends React.Component {
   
    render() {
        return(
            <div>
                <Button text = "Hello from GFG"> </Button>
            </div>
        )
    }
}
  
class Button extends React.Component{
    state = {
        textflag: false,
    }
       
    ToggleButton() {
        this.setState(
            {textflag : !this.state.textflag}
        );
    }
   
    render() {
        return(
            <div>
                <button onClick={() => this.ToggleButton()}>
                  { this.state.textflag === false ? "Hide":"Show" }
                </button>
                {!this.state.textflag && this.props.text}
            </div>
        )
    }
}
  
export default Counter;

Producción: