El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El renderizado condicional en React permite a los desarrolladores mostrar diferentes componentes o elementos en la interfaz de usuario en función de ciertas condiciones. Es una técnica fundamental para crear aplicaciones dinámicas y reactivas.

Conceptos Clave

Condicionales en JSX: Utilizar operadores condicionales dentro de JSX para decidir qué elementos renderizar.
Operador Ternario: Una forma concisa de escribir condicionales.
Operador Lógico &&: Utilizado para renderizar un componente solo si una condición es verdadera.
Funciones de Renderizado: Encapsular la lógica de renderizado condicional dentro de funciones.

Condicionales en JSX

En React, puedes usar condicionales dentro de JSX de manera similar a cómo lo harías en JavaScript. Aquí hay un ejemplo básico:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

En este ejemplo, el componente Greeting muestra un mensaje diferente basado en el valor de isLoggedIn.

Operador Ternario

El operador ternario es una forma concisa de escribir condicionales. Aquí hay un ejemplo:

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

En este caso, si props.isLoggedIn es verdadero, se renderiza "Welcome back!", de lo contrario, se renderiza "Please sign up."

Operador Lógico &&

El operador lógico && se puede usar para renderizar un componente solo si una condición es verdadera:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

En este ejemplo, el mensaje de correo no leído solo se muestra si unreadMessages.length es mayor que 0.

Funciones de Renderizado

Encapsular la lógica de renderizado condicional dentro de funciones puede hacer que el código sea más limpio y fácil de mantener:

function renderGreeting(isLoggedIn) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  return (
    <div>
      {renderGreeting(props.isLoggedIn)}
    </div>
  );
}

Ejemplo Completo

Aquí hay un ejemplo completo que combina varios métodos de renderizado condicional:

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {isLoggedIn ? (
        <button onClick={handleLogoutClick}>Logout</button>
      ) : (
        <button onClick={handleLoginClick}>Login</button>
      )}
    </div>
  );
}

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

export default App;

En este ejemplo, el componente App maneja el estado de isLoggedIn y muestra diferentes botones y mensajes basados en ese estado.

Ejercicio Práctico

Ejercicio

Crea un componente UserStatus que muestre "User is online" si la propiedad isOnline es verdadera, y "User is offline" si es falsa. Además, muestra un botón que permita cambiar el estado de isOnline.

Solución

import React, { useState } from 'react';

function UserStatus() {
  const [isOnline, setIsOnline] = useState(false);

  const toggleStatus = () => {
    setIsOnline(!isOnline);
  };

  return (
    <div>
      <h1>{isOnline ? "User is online" : "User is offline"}</h1>
      <button onClick={toggleStatus}>
        {isOnline ? "Go Offline" : "Go Online"}
      </button>
    </div>
  );
}

export default UserStatus;

Retroalimentación

Error Común: Olvidar actualizar el estado correctamente. Asegúrate de usar la función de actualización de estado proporcionada por useState.
Consejo: Usa nombres de variables claros y descriptivos para que el código sea más fácil de entender.

Conclusión

El renderizado condicional es una técnica esencial en React que permite crear interfaces de usuario dinámicas y reactivas. Al dominar los operadores condicionales, el operador ternario, el operador lógico &&, y las funciones de renderizado, puedes manejar de manera efectiva diferentes escenarios de renderizado en tus aplicaciones React.

Renderizado Condicional

Conceptos Clave

Condicionales en JSX

Operador Ternario

Operador Lógico &&

Funciones de Renderizado

Ejemplo Completo

Ejercicio Práctico

Ejercicio

Solución

Retroalimentación

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa