ReactJS | Representación condicional

Hemos discutido cómo crear componentes , cómo renderizar componentes , usar proptypes , usar estados para almacenar información y mucho más. En nuestros artículos anteriores, también habíamos desarrollado una aplicación de calculadora básica en ReactJS. 
Puede surgir una situación en la que queramos renderizar algo basado en alguna condición. Por ejemplo, considere la situación de manejar un botón de inicio/cierre de sesión. Ambos botones tienen funciones diferentes, por lo que serán componentes separados. Ahora, la tarea es si un usuario ha iniciado sesión, tendremos que renderizar el componente Cerrar sesión para mostrar el botón de cierre de sesión y si el usuario no ha iniciado sesión, tendremos que renderizar el componente Iniciar sesión para mostrar el botón de inicio de sesión. Esto es lo que llamamos Representación condicional en ReactJS. Eso es crear múltiples componentes y renderizarlos en función de algunas condiciones. Este también es un tipo de encapsulación compatible con React. 
Ahora creemos una página en React que tendrá un mensaje y un botón. El botón dirá «Iniciar sesión» si el usuario no ha iniciado sesión y «Cerrar sesión» si el usuario ha iniciado sesión. También agregaremos algunas funciones a este botón, ya que al hacer clic en «Iniciar sesión», el mensaje dirá «Bienvenido usuario» y el el botón cambiará a «Cerrar sesión» y al hacer clic en «Cerrar sesión», el mensaje cambiará a «Iniciar sesión» y el botón cambiará a «Iniciar sesión».
Para hacer esto, crearemos un componente principal llamado «Página de inicio», dos componentes llamados «Iniciar sesión» y «Cerrar sesión» y un componente más llamado «Mensaje». Usaremos una variable de estado llamada «isLoggedIn» para almacenar la información sobre si el usuario ha iniciado sesión o no. El valor de esta variable cambiará de acuerdo con el clic del botón por parte del usuario. La página de inicioEl componente representará el componente Mensaje para mostrar el mensaje y también representará uno de los componentes entre Iniciar sesión y Cerrar sesión en función del valor almacenado en isLoggedIn . El componente Message también devolverá diferentes mensajes según el valor del estado isLoggedIn .
Veamos ahora el programa completo para realizar la tarea anterior: 

Abra el directorio de su proyecto de reacción y edite el archivo Index.js de la carpeta src:

índice src.js:
 

import React from 'react';
import ReactDOM from 'react-dom';
 
// Message Component
function Message(props)
{
    if (props.isLoggedIn)
        return <h1>Welcome User</h1>;
    else
        return <h1>Please Login</h1>;
}
 
// Login Component
function Login(props)
{
   return(
           <button onClick = {props.clickFunc}>
               Login
           </button>
       );
}
 
// Logout Component
function Logout(props)
{
    return(
           <button onClick = {props.clickFunc}>
               Logout
           </button>
       );
}
 
// Parent Homepage Component
class Homepage extends React.Component{
 
    constructor(props)
    {
        super(props);
 
        this.state = {isLoggedIn : false};
 
        this.ifLoginClicked = this.ifLoginClicked.bind(this);
        this.ifLogoutClicked = this.ifLogoutClicked.bind(this);
    }
 
    ifLoginClicked()
    {
        this.setState({isLoggedIn : true});
    }
 
    ifLogoutClicked()
    {
        this.setState({isLoggedIn : false});
    }
 
    render(){
 
        return(
 
            <div>
 
                <Message isLoggedIn = {this.state.isLoggedIn}/>
                 
                {
                    (this.state.isLoggedIn)?(
                    <Logout clickFunc = {this.ifLogoutClicked} />
                    ) : (
                    <Login clickFunc = {this.ifLoginClicked} />
                    )
                }
 
            </div>
                 
            );
    }
}
 
ReactDOM.render(
    <Homepage />,
    document.getElementById('root')
);

Producción: 
 

En el resultado anterior, puede ver que al hacer clic en el botón Iniciar sesión, el mensaje y el botón cambian y viceversa.
 

Uso de condiciones con operador lógico &&

Podemos usar el operador lógico && junto con alguna condición para decidir qué aparecerá en la salida en función de si la condición se evalúa como verdadera o falsa. A continuación se muestra la sintaxis del uso del operador lógico && con condiciones: 
 

{
    condition &&
    
    // This section will contain
    // elements you want to return
    // that will be a part of output
}

Si la condición proporcionada en la sintaxis anterior se evalúa como verdadera, los elementos justo después del operador && serán parte de la salida y si la condición se evalúa como falsa, el código entre llaves no aparecerá en la salida.
El siguiente ejemplo se usa para ilustrar esto: 
Abra el directorio de su proyecto de reacción y edite el archivo Index.js de la carpeta src:

índice src.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
// Example Component
function Example()
{
    const counter = 5;
 
    return(<div>
            {
                (counter==5) &&
                <h1>Hello World!</h1>
            }
           </div>
        );
}
 
ReactDOM.render(
    <Example />,
    document.getElementById('root')
);

Producción: 
 

Puede ver claramente en el resultado anterior que la condición (contador == 5) se evalúa como verdadera, por lo que el elemento <h1> se representa correctamente en la pantalla.
 

Evitar que el componente se renderice

A veces puede suceder que no queramos que algunos componentes se rendericen. Para evitar que un componente se renderice, tendremos que devolver nulo como salida de renderizado. Considere el siguiente ejemplo: 
abra el directorio de su proyecto de reacción y edite el archivo Index.js de la carpeta src:

índice src.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
// Example Component
function Example(props)
{
    if(!props.toDisplay)
        return null;
    else
        return <h1>Component is rendered</h1>;
}
 
ReactDOM.render(
    <div>
        <Example toDisplay = {true} />
        <Example toDisplay = {false} />
    </div>,
    document.getElementById('root')
);

Producción: 
 

Puede ver claramente en la salida anterior que el componente Ejemplo se representa dos veces, pero el elemento <h1> se representa solo una vez, ya que en la segunda representación del componente Ejemplo , se devuelve nulo como salida de representación.