¿Cómo renderizar componentes condicionalmente en ReactJS?

React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

Cuando la interfaz de usuario se diseña con React, nos encontramos con una situación en la que los componentes deben representarse en la pantalla en función de alguna condición. Por ejemplo, en un sistema de información universitario, cuando un profesor inicia sesión, se procesan diferentes componentes, mientras que cuando un estudiante inicia sesión, se procesan diferentes componentes.

Esto se llama Representación condicional de componentes React.

Representación condicional: para crear múltiples componentes y representarlos en función de algunas condiciones. Este también es un tipo de encapsulación compatible con React.

¿Cómo hacer el renderizado condicional?

Se hace usando stateVariable . El valor de stateVariable determina si renderizar el componente o no. Su valor se puede cambiar por la ocurrencia de cualquier evento como onClick.

Creando la aplicación React:

Paso 1: Cree una aplicación de reacción usando el siguiente comando.

npx create-react-app foldername

Paso 2: una vez hecho esto, cambie su directorio a la aplicación recién creada usando el siguiente comando.

cd foldername

Estructura del proyecto: La estructura del proyecto debería verse así:

Ejemplo 1: En este ejemplo, usaremos una variable de estado; isLoggedIn y se establece en falso inicialmente. Su valor se cambia mediante un botón. Si isLoggedIn es falso, el usuario se desconecta y, si es verdadero, el usuario inicia sesión. Cuando un usuario inicia sesión, luego usa el operador de condición, el componente se representa en la pantalla. 

Operador de condición:

{statement} ? true : false 

import React from 'react'
import { useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { CardActionArea } from '@mui/material';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';
function DisplayLoggedOut() {
    return (
        <div style={{ background: 'green' }}>
            <h1 style={{ color: 'white' }}> Please Login</h1>
        </div>
    )
}
function DisplayLoggedIn() {
    return (
        <div >
            <div style={{ background: 'green' }}>
                <h1 style={{ color: 'white' }}> You are Logged In</h1>
            </div>
            <h3>Courses available on GeeksforGeeks</h3>
            <div style={{ display: 'inline' }}>
                <Card sx={{ maxWidth: 345 }} >
                    <CardActionArea>
                        <CardMedia
                            component="img"
                            height="140"
                            image=
"https://www.geeksforgeeks.org/wp-content/uploads/Java.png"
                            alt="green iguana"
                        />
                        <CardContent>
                            <Typography gutterBottom variant="h5"
                                component="div">
                                Java
                            </Typography>
                            <Typography variant="body2"
                                color="text.secondary">
                                The Java codes are first compiled into byte
                                code (machine-independent code). Then the byte
                                code runs on Java Virtual Machine (JVM)
                                regardless of the underlying architecture.
                            </Typography>
                        </CardContent>
                    </CardActionArea>
                </Card>
            </div>
        </div>
    )
}
function Rendering() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const handleLoginButton = () => {
        if (isLoggedIn) {
            setIsLoggedIn(false);
        }
        else {
            setIsLoggedIn(true);
        }
    }
    return (
        <div>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>Conditionally Rendering Components in React</h3>
            {isLoggedIn == false ? <DisplayLoggedOut /> : <DisplayLoggedIn />}
            <button onClick={handleLoginButton} className="btn btn-primary">
                {isLoggedIn == false ? 'Log In' : 'Log Out'}
            </button>
        </div>
    )
}
function App() {
    return (
        <div className="App">
            <Rendering />
        </div>
    );
}
export default App;

Paso para ejecutar la aplicación: ejecute su aplicación ejecutando el siguiente comando en el src 

npm start 

Producción:

Ejemplo 2: hemos mostrado una tabla Bootstrap después de que un usuario haya iniciado sesión, usando: 

import Table from 'react-bootstrap/Table'

import React from 'react'
import { useState } from 'react';
import Table from 'react-bootstrap/Table'
function DisplayLoggedOut() {
    return (
        <div style={{ background: 'green' }}>
            <h1 style={{ color: 'white' }}> Please Login</h1>
        </div>
    )
}
function DisplayLoggedIn() {
    return (
        <div >
            <div style={{ background: 'green' }}>
                <h1 style={{ color: 'white' }}> You are Logged In</h1>
            </div>
            <h3>List of Students</h3>
            <div style={{ display: 'inline' }}>
                <Table hover >
                    <thead >
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Address</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Muskan</td>
                            <td>Roomie</td>
                            <td>Lucknow</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Pratiksha</td>
                            <td>Singh</td>
                            <td>Ajamgarh</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Nishi</td>
                            <td>Mehrotra</td>
                            <td>Prayagraj</td>
                        </tr>
                    </tbody>
                </Table>
            </div>
        </div>
    )
}
function Rendering() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const handleLoginButton = () => {
        if (isLoggedIn) {
            setIsLoggedIn(false);
        }
        else {
            setIsLoggedIn(true);
        }
    }
    return (
        <div>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>Conditionally Rendering Components in React</h3>
            {isLoggedIn == false ? <DisplayLoggedOut /> : <DisplayLoggedIn />}
            <button onClick={handleLoginButton} className="btn btn-primary">
                {isLoggedIn == false ? 'Log In' : 'Log Out'}
            </button>
        </div>
    )
}
function App() {
    return (
        <div className="App">
            <Rendering />
        </div>
    );
}
export default App;

Producción: