Renderizado condicional en React: if, ternario, && y null

Q: ¿Cómo escribo un if dentro de JSX?

No puedes poner una sentencia if dentro de las llaves de JSX, porque las llaves aceptan expresiones. Usa un ternario (cond ? a : b) o && dentro del JSX, o ejecuta el if antes del return y guarda el JSX en una variable.

Q: ¿Por qué mi componente muestra un 0?

count && devuelve el propio count cuando es 0, y React renderiza el número 0. Haz que el lado izquierdo sea un booleano real: count > 0 && .

Q: ¿Cómo no renderizo nada en React?

Devuelve null desde el componente, o pon null, undefined, false o true en el JSX. React no renderiza ninguno de ellos.

Q: ¿Debo ocultar un componente con CSS o quitarlo?

Quitarlo (show && ) lo desmonta, así que su estado se descarta y empieza de cero la próxima vez. Ocultarlo con display: none lo mantiene montado y conserva su estado. Elige según si el estado debe sobrevivir.

El renderizado condicional en React significa elegir lo que devuelve un componente con JavaScript normal: una sentencia if antes del return, un ternario cond ? a : b dentro del JSX, o cond && <Thing /> para mostrar algo o nada. No hay ninguna sintaxis de plantillas especial que aprender.

import { useState } from 'react';

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

    return (
        <div>
            <p>{isLoggedIn ? 'Welcome back, Ada.' : 'Please log in.'}</p>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Log out' : 'Log in'}
            </button>
        </div>
    );
}

Haz clic en el botón y cambian tanto el mensaje como la etiqueta, porque cada ternario elige una cadena distinta en el siguiente renderizado. Cambia useState(false) por useState(true) y la vista previa empieza con la sesión iniciada.

Sentencias if y returns tempranos

Las llaves de JSX aceptan expresiones, no sentencias, así que no puedes escribir {if (x) ...} dentro del marcado. Puedes escribir cualquier if que quieras antes del return. Cuando todo un estado del componente se ve distinto (cargando, error, vacío), haz un return temprano para cada caso y deja el marcado principal para el caso normal.

import { useState } from 'react';

function Inbox({ status, messages }) {
    if (status === 'loading') {
        return <p>Loading messages...</p>;
    }
    if (status === 'error') {
        return <p style={{ color: 'crimson' }}>Could not load your inbox.</p>;
    }
    if (messages.length === 0) {
        return <p>No messages yet.</p>;
    }
    return (
        <ul>
            {messages.map((m) => (
                <li key={m}>{m}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [status, setStatus] = useState('loading');
    const [messages, setMessages] = useState([]);

    return (
        <div>
            <button onClick={() => setStatus('loading')}>Loading</button>{' '}
            <button onClick={() => setStatus('error')}>Error</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages([]); }}>Empty</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages(['Hi', 'Lunch?']); }}>
                Loaded
            </button>
            <Inbox status={status} messages={messages} />
        </div>
    );
}

Cada botón pone la bandeja de entrada en un estado distinto, y cada estado tiene su propia rama corta y legible. Los returns tempranos dejan el camino principal al final sin anidar.

Ternarios dentro de JSX

Cuando solo cambia una parte pequeña del marcado, un ternario en línea la mantiene junta: {isOpen ? <CloseIcon /> : <MenuIcon />}. Los ternarios funcionan bien para dos opciones. Los ternarios anidados para tres o más se vuelven difíciles de leer rápidamente:

// Hard to follow
{status === 'loading' ? <Spinner /> : status === 'error' ? <ErrorBox /> : <List />}

Cuando veas eso, mueve la lógica a una cadena de if antes del return (como arriba) o a un mapa de objetos (más abajo).

&& y el 0 suelto

cond && <Thing /> renderiza <Thing /> cuando cond es truthy y nada cuando es false. Funciona porque && devuelve su lado izquierdo cuando ese lado es falsy, y React no renderiza nada para false, null y undefined.

La trampa es que 0 también es falsy, y React sí renderiza números. Así que count && <Badge /> con un contador en 0 pone un 0 literal en la página.

import { useState } from 'react';

export default function App() {
    const [unread, setUnread] = useState(0);

    return (
        <div>
            <p>
                Broken: {unread && <b>{unread} unread</b>}
            </p>
            <p>
                Fixed: {unread > 0 && <b>{unread} unread</b>}
            </p>
            <button onClick={() => setUnread(unread + 1)}>New message</button>{' '}
            <button onClick={() => setUnread(0)}>Mark all read</button>
        </div>
    );
}

Sin mensajes sin leer, la primera línea dice "Broken: 0" mientras que la segunda no muestra nada después de "Fixed:". Haz clic en New message y ambas coinciden; haz clic en Mark all read y el 0 vuelve. La solución es darle a && un booleano real: unread > 0, items.length > 0 o Boolean(unread). Una cadena vacía '' tiene en principio el mismo problema, pero no se ve nada al renderizarla, así que rara vez lo notas.

Devolver null

Un componente puede devolver null para no renderizar nada. Un aviso que solo aparece cuando hay algo de qué avisar es un buen ejemplo: el padre siempre renderiza <Warning /> y el componente decide.

import { useState } from 'react';

function Warning({ message }) {
    console.log('Warning rendered, message =', message);
    if (!message) {
        return null;
    }
    return (
        <p style={{ background: '#fff4d6', padding: 8, borderRadius: 6 }}>{message}</p>
    );
}

export default function App() {
    const [message, setMessage] = useState('');

    return (
        <div>
            <Warning message={message} />
            <button onClick={() => setMessage('Your trial ends tomorrow.')}>Warn</button>{' '}
            <button onClick={() => setMessage('')}>Dismiss</button>
        </div>
    );
}

Mira la consola: la función Warning registra en cada renderizado, incluidos los que devuelven null. Devolver null omite la salida, no el trabajo. Sus hooks y efectos se siguen ejecutando, así que si un componente es costoso o inicia algo (un temporizador, una suscripción), decide en el padre y no lo renderices en absoluto.

Guardar JSX en una variable

JSX es un valor, así que puedes asignarlo a una variable, construirlo con sentencias if y ponerlo en el marcado después. Esto ayuda cuando una pieza de un layout más grande depende de varias condiciones.

function Checkout({ cart, user }) {
    let action;
    if (!user) {
        action = <a href="/login">Log in to check out</a>;
    } else if (cart.length === 0) {
        action = <p>Your cart is empty.</p>;
    } else {
        action = <button>Pay now</button>;
    }

    return (
        <section>
            <h2>Your cart</h2>
            {action}
        </section>
    );
}

Elegir entre varios componentes con un objeto

Cuando la elección es "uno entre muchos", un objeto que asocia cada valor con un componente es más corto que una larga cadena de if o un switch, y agregar un caso es una línea.

import { useState } from 'react';

function Profile() {
    return <p>Name: Ada Lovelace</p>;
}
function Billing() {
    return <p>Plan: Pro, renews on 1 May</p>;
}
function Security() {
    return <p>Two-factor login is on.</p>;
}

const TABS = { profile: Profile, billing: Billing, security: Security };

export default function App() {
    const [tab, setTab] = useState('profile');
    const Panel = TABS[tab];

    return (
        <div>
            {Object.keys(TABS).map((name) => (
                <button
                    key={name}
                    onClick={() => setTab(name)}
                    style={{ fontWeight: tab === name ? 700 : 400, marginInlineEnd: 6 }}
                >
                    {name}
                </button>
            ))}
            <Panel />
        </div>
    );
}

TABS[tab] elige un componente y <Panel /> lo renderiza. La variable debe empezar con mayúscula: JSX trata <panel /> como una etiqueta HTML. Agrega una entrada notifications a TABS con su propio componente y aparece un cuarto botón.

Ocultar no es lo mismo que no renderizar

Hay dos formas de hacer que algo desaparezca, y se comportan distinto. show && <Counter /> quita el componente del árbol cuando show es false. React lo desmonta y descarta su estado, así que empieza de cero cuando vuelve. Ocultarlo con CSS (style={{ display: show ? 'block' : 'none' }}) lo mantiene montado, así que su estado sobrevive.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <p>
            {label}: <button onClick={() => setCount(count + 1)}>{count}</button>
        </p>
    );
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            <label>
                <input type="checkbox" checked={show} onChange={(e) => setShow(e.target.checked)} />
                Show counters
            </label>
            {show && <Counter label="Removed with &&" />}
            <div style={{ display: show ? 'block' : 'none' }}>
                <Counter label="Hidden with CSS" />
            </div>
        </div>
    );
}

Haz clic en ambos contadores varias veces, desmarca la casilla y vuelve a marcarla. El primer contador vuelve a 0 y el segundo conserva su número. Ninguno está mal: quitar es lo correcto para un formulario que debe empezar vacío cada vez, ocultar es lo correcto para pestañas cuya posición de scroll o cuyo input se deben conservar. La página sobre renderizado explica cómo decide React que un componente es el mismo entre renderizados.

React 19.2 agrega una tercera opción, <Activity mode="hidden">, que oculta sus hijos y conserva su estado como hace CSS, y además limpia sus efectos hasta que se vuelven a mostrar.

Props y atributos condicionales

Las condiciones no solo deciden qué elementos aparecen. Cualquier prop puede recibir un valor calculado, así que un ternario o una comparación dentro de un atributo suele ser todo lo que necesitas:

<button disabled={!canSave} className={hasError ? 'field error' : 'field'}>
    Save
</button>
<input aria-invalid={hasError} placeholder={user ? user.email : 'you@example.com'} />

Cuando el valor de una prop es undefined, React omite el atributo por completo, lo que es una forma limpia de agregar un atributo solo a veces: title={isTruncated ? fullText : undefined}. Para atributos booleanos como disabled y checked, pasa true o false y React los agrega o los quita.

Condiciones en listas

Para dejar elementos fuera de una lista, filtra el array antes de mapearlo en lugar de devolver null desde dentro de map. items.filter((i) => i.done).map(...) se lee tal como lo que hace, y la página de listas y keys lo muestra en un ejemplo en funcionamiento.

Preguntas frecuentes

¿Cómo escribo un if dentro de JSX?

No puedes poner una sentencia if dentro de las llaves de JSX, porque las llaves aceptan expresiones. Usa un ternario (cond ? a : b) o && dentro del JSX, o ejecuta el if antes del return y guarda el JSX en una variable.

¿Por qué mi componente muestra un 0?

count && <Badge /> devuelve el propio count cuando es 0, y React renderiza el número 0. Haz que el lado izquierdo sea un booleano real: count > 0 && <Badge />.

¿Cómo no renderizo nada en React?

Devuelve null desde el componente, o pon null, undefined, false o true en el JSX. React no renderiza ninguno de ellos.

¿Un componente que devuelve null se sigue ejecutando?

Sí. Su función se ejecuta, sus hooks se ejecutan y sus efectos se disparan. Devolver null solo significa que no agrega nada a la página. Para saltarte todo el trabajo, no renderices el componente desde el padre.

¿Debo ocultar un componente con CSS o quitarlo?

Quitarlo (show && <Panel />) lo desmonta, así que su estado se descarta y empieza de cero la próxima vez. Ocultarlo con display: none lo mantiene montado y conserva su estado. Elige según si el estado debe sobrevivir.

Conceptos relacionados