Set state and change return view

Ionic Framework Ionic React
1

Hello.

With setState I can change the views but I also need to change based on 3 states. How can I do?

if state is false what will be display is:

      <div className="contenedor_central">
      <strong>Completá tus datos</strong>
      <Boton name="Continuar" onClick={this.enviarRegistro}></Boton>
      </div>

if state is active it will be display:

    <div className="contenedor_central">
        <Boton name="Nueva cuenta de usuario" onClick={this.handleHide}></Boton>
        <Boton name="Nueva cuenta de servicio" onClick={this.handleShow}></Boton>
      </div>

But if nuevoRegistro is true, it must be return: 3

 <div className="contenedor_central">
      <strong>Se ha enviado al correo informacion para continuar con el registro</strong>
    </div>

How can this 3 state be implemented?

class RegistroNuevaCuenta extends Component{
  state = {
    isActive:false
  }

  nuevoRegistro =false
  
  handleShow = ()=>{
    this.setState({
        isActive: true
    })
  }

  handleHide = () =>{
    this.setState({
        isActive: false
    })
  }

  enviarRegistro = () =>{
    this.nuevoRegistro=true
  }

  render(){
    if(!this.nuevoRegistro){
      if (this.state.isActive ) {
        return (
          <div className="contenedor_central">
          <strong>Completá tus datos</strong>
          <Boton name="Continuar" onClick={this.enviarRegistro}></Boton>
          </div>
            
          );
      } else {
        return (
          <div className="contenedor_central">
            <Boton name="Nueva cuenta de usuario" onClick={this.handleHide}></Boton>
            <Boton name="Nueva cuenta de servicio" onClick={this.handleShow}></Boton>
          </div>
        );
        } 
    }else{
      return(
        <div className="contenedor_central">
          <strong>Se ha enviado al correo informacion para continuar con el registro</strong>
        </div>
      );
    }
      }
};
2

The way you can do a 3 state is to use a boolean | null

const [isActive, setIsActive] = useState<boolean | null>(false);

Treat null as the 3rd state. Hope that helps