Renderizando elementos con Operadores Lógicos en React JS

Si estas desarrollando un proyecto en React JS en ocasiones necesitas mostrar un componente a un usuario, este usuario debe cumplir ciertas condiciones para poder ver o acceder a dicho modulo, por suerte React JS nos da la opción de manejar esto sin problemas, en este artículo te enseñaremos a como hacerlo, vayamos al articulo para que nos entiendas de que hablamos.

imagen: medium.mybridge.co

En React JS podemos usar operadores condicionales para verificar si un valor cumple ciertos requisitos, podemos usar if para verificar y si cumple los requerimientos entonces que le cargue el componente o contenido en la UI.

Nota: Los códigos de ejemplo para este articulo están transpilados con Babel JS, te recomendamos leer nuestro artículo Que es Babel JS y como Instalarlo para que te familiarices con esta útil herramienta.

Por ejemplo, si un usuario no ha iniciado sesión en la aplicacion le podemos enviar un mensaje que debe iniciar sesión, pero si el usuario ha iniciado sesión entonces lo enviamos a cierta zona permitida solo a usuario registrados con su mensaje de bienvenida, veamos el codigo a continuación

function Bienvenida(props) {
  return <h1>Bienvenido a la zona de Usuario Registrados !</h1>;
}

function UsuarioAnonimo(props) {
  return <h1>Por favor, inicia sesión !</h1>;
}

function Saludo(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <Bienvenida />;
  }
  return <UsuarioAnonimo />;
}

ReactDOM.render(
  // Si cambias en isLoggedIn={true} a true, te va salir un mensaje de bienvenido, si lo dejas como false te va pedir que inicies sesión:
  <Saludo isLoggedIn={false} />,
  document.getElementById('root')
);

// En nuestra vista obtendremos
<div id="root">Por favor, inicia sesión !</div>

Almacenando Variables

En React JS podemos usar variables para almacenar determinados elementos que nos ayudarán a mostrar ciertos elementos en nuestra vista, solo si cumples las condiciones.

Por ejemplo agregamos 2 botones en nuestra vista, uno para Iniciar Sesión y Otro para Cerrar Sesión, tambien creamos un componente llamado ControlSesion y si cumple o no las condiciones mostramos el mensaje que hicimos en el primer ejemplo:

class ControlSesion extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <BotonLogout onClick={this.handleLogoutClick} />;
    } else {
      button = <BotonLogin onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Saludo isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

function Bienvenida(props) {
  return <h1>Bienvenido a la zona de Usuario Registrados !</h1>;
}

function UsuarioAnonimo(props) {
  return <h1>Por favor, inicia sesión !</h1>;
}

function Saludo(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <Bienvenida />;
  }
  return <UsuarioAnonimo />;
}

function BotonLogin(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function BotonLogout(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

ReactDOM.render(
  <ControlSesion />,
  document.getElementById('root')
);

// Si el usuario no esta logeado, en la vista le mostramos un mensaje con un botón para que inicie sesión:
<div id="root">
  <div>
    <h1>Por favor, inicia sesión !</h1>
    <button>Login</button>
  </div>
</div>

// Y si el usuario SI esta logeado, entonces lo mostraremos un mensaje de Bienvenida con un botón para que cierre sesión:
<div id="root">
  <div>
    <h1>Bienvenido a la zona de Usuario Registrados !</h1>
    <button>Logout</button>
  </div>
</div>

Operador Lógico &

Cuando estamos trabajando con JSX en React JS podemos agrupar entre llaves una expresión determinada junto con el operador lógico &, por ejemplo:

function BandejaCorreo(props) {
  const mensajesSinleer = props.mensajesSinleer;
  return (
    <div>
      <h1>Bienvenido(a) !</h1>
      {mensajesSinleer.length > 0 &
        <h2>
          Usted tiene {mensajesSinleer.length} mensajes sin Leer.
        </h2>
      }
    </div>
  );
}

const mensajes = ['Reunion', 'Re: Reunion', 'Re:Re: Reunion'];
ReactDOM.render(
  <BandejaCorreo mensajesSinleer={mensajes} />,
  document.getElementById('root')
);

// En la vista obtendremos
<div id="root">
  <div>
    <h1>Bienvenido(a) !</h1>
    <h2>Usted tiene 3 mensajes sin Leer.</h2>
  </div>
</div>

Para entender el ejemplo, si has visto en Javascript el operador & evalúa de la mano de un true o false, entonces si la condición es true, los elementos despues del operador & se imprimirán en la vista y si es false React JS lo ignora y no lo imprime.

Operador Condicional if – else en Linea

En React JS podemos representar elementos en linea de forma condicional, esto lo podemos hacer usando el operador condicional de Javascript condicion ? true :  false

En el siguiente código puedes ver un ejemplo:

render() {
  const inicioSesion = this.state.inicioSesion;
  return (
    <div>
      El usuario es <b>{inicioSesion ? 'currently' : 'not'}</b> Conectado.
    </div>
  );
}

// Obtendremos el mensaje
El usuario 'tal' esta conectado

Evitar que los componentes se rendericen

A veces en un proyecto necesitamos que algunos componentes estén ocultos a la vista del usuario, con React JS lo podemos hacer, así haya sido procesado por otro componente, para esto devolvemos un valor null a la hora de renderizar el componente.

En el siguiente ejemplo vamos a mostrar una alerta si p

function Alerta(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="alerta">
      Alerta !
    </div>
  );
}

class Pagina extends React.Component {
  constructor(props) {
    super(props);
    this.state = {Alerta: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      Alerta: !prevState.Alerta
    }));
  }
  
  render() {
    return (
      <div>
        <Alerta warn={this.state.Alerta} />
        <button onClick={this.handleToggleClick}>
          {this.state.Alerta ? 'Ocultar' : 'Mostrar'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Pagina />,
  document.getElementById('root')
);

// En nuestra vista tenemos un mensaje de alerta que desparecerá cuando hacemos click en el botón ocultar
<div id="root">
  <div>
    <div class="alerta">Alerta !</div>
    <button>Ocultar</button>
  </div>
</div>

Cuando haces click en el botón ocultar, este retorna null y no se muestra el mensaje, esto no afecta el ciclo de vida de los demás componentes.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.