Renderizado condicional y de listas en React sin herramientas complejas

Esta guía reconstruye un camino práctico para: el renderizado condicional en React y el renderizado de listas, así como la verdadera naturaleza del atributo key. Se enfoca en contratos, verificaciones y código que se puede incorporar a un repositorio sin tener que adivinar su propósito. Para obtener una visión general, defina las entradas, el responsable de cada paso y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar el paso a partir de un punto de control conocido, sin necesidad de adivinar el estado oculto. Registre los tiempos y costos junto con los resultados funcionales; la visibilidad temprana evita facturas inesperadas en entornos compartidos.

Renderizado condicional: ¿Mostrar o no mostrar?

Para la renderización condicional — para decidir si mostrar o no algo, defina las entradas, el responsable de la etapa y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la etapa desde un punto de control conocido sin tener que adivinar el estado oculto. Mantenga la configuración fuera del código de la aplicación. Los archivos de entorno, los almacenes de secretos y las banderas de funcionalidad deben estar en un lugar que los operadores puedan auditar. Coloque los tipos junto con los componentes y mantenga las propiedades específicas. Un gran número de propiedades genera la deuda que TypeScript está diseñado para evitar.

Enfoque 1: Ramificación con if, y devolver null cuando no se dibuje nada

Para el Enfoque 1: ramificación con if, y devolver null cuando no se dibuje nada. Defina las entradas, el responsable de la etapa y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la etapa desde un punto de control conocido sin tener que adivinar el estado oculto. Documente tanto la ruta normal como la ruta de recuperación. Las reintentos y el manejo de mensajes no entregados forman parte del producto. Asocie los tipos con los componentes y mantenga las propiedades específicas. Un gran número de propiedades genera la deuda que TypeScript está diseñado para evitar.

type Props = { isInStock: boolean };

function StockBadge({ isInStock }: Props) {
  if (!isInStock) {
    return null; // out of stock — draw nothing
  }
  return <span className="badge">In stock</span>;
}

Enfoque 2: Una de dos con el operador ternario

Para el Enfoque 2 — Uno de los dos con el operador ternario, defina las entradas, el responsable del paso y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar el paso desde un punto de control conocido sin tener que adivinar el estado oculto. Prefiera unidades pequeñas y verificables en lugar de scripts extensos. Cuando un paso falla, el error debe indicar una única responsabilidad. Coloque los tipos junto a los componentes y mantenga las propiedades limitadas. Un gran número de propiedades genera la deuda que TypeScript está diseñado para evitar. Para el Enfoque 2 — Uno de los dos con el operador ternario, defina las entradas, el responsable del paso y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar el paso desde un punto de control conocido sin tener que adivinar el estado oculto. Registre los tiempos y costos junto con los resultados funcionales. La visibilidad temprana evita facturas inesperadas en entornos compartidos.

function StockBadge({ isInStock }: Props) {
  return (
    <span className="badge">
      {isInStock ? 'In stock' : 'Out of stock'}
    </span>
  );
}

Enfoque 3: “Solo cuando” con &&

En el Enfoque 3 — “Solo cuando” con && — se deben definir las entradas, el responsable de la tarea y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la tarea desde un punto de control conocido sin tener que adivinar el estado oculto. Se debe mantener la configuración fuera del código de la aplicación. Los archivos de entorno, los almacenes de datos secretos y las banderas de funcionalidad deben estar en un lugar que los operadores puedan auditar. Es preferible el renderizado condicional explícito sobre atajos ingeniosos que ocultan errores en producción.

function Cart({ count }: { count: number }) {
  return (
    <div>
      <h2>Cart</h2>
      {count > 0 && <p>Items in cart: {count}</p>}
    </div>
  );
}

La trampa más común con &&: el número 0

Para la trampa más común con &&, que es el número 0, defina las entradas, el responsable de la etapa y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la etapa desde un punto de control conocido sin tener que adivinar el estado oculto. Documente tanto la ruta normal como la ruta de recuperación. Las reintentos y el manejo de mensajes no entregados forman parte del producto. Prefiera la renderización condicional explícita a los atajos ingeniosos que ocultan errores en producción.

function Cart({ count }: { count: number }) {
  return (
    <div>
      <h2>Cart</h2>
      {/* 🔴 trap: if count is 0, "0" shows up on screen */}
      {count && <p>Items in cart: {count}</p>}
    </div>
  );
}

function App() {
  return (
    <>
      <Cart count={0} />
      <Cart count={10} />
    </>
  );
}

export default App;

// ✅ count > 0 is true/false, so it's safe
{count > 0 && <p>Items in cart: {count}</p>}

Renderizado de listas: dibujar un array en un bucle

Para la renderización de listas — dibujar un array en un bucle, defina las entradas, el responsable de la tarea y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la tarea desde un punto de control conocido sin tener que adivinar el estado oculto. Prefiera unidades pequeñas y verificables en lugar de scripts extensos. Cuando una tarea falla, el error debe indicar una única responsabilidad. Prefiera la renderización condicional explícita a los atajos ingeniosos que ocultan errores en entornos de producción. Para la renderización de listas — dibujar un array en un bucle, defina las entradas, el responsable de la tarea y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la tarea desde un punto de control conocido sin tener que adivinar el estado oculto. Registre los tiempos y costos junto con los resultados funcionales. La visibilidad temprana evita facturas inesperadas en entornos compartidos.

type Product = {
  id: number;
  name: string;
  price: number;
};

const products: Product[] = [
  { id: 1, name: 'Mechanical Keyboard', price: 89000 },
  { id: 2, name: 'Wireless Mouse', price: 45000 },
  { id: 3, name: 'USB Hub', price: 23000 },
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — {product.price.toLocaleString()} won
        </li>
      ))}
    </ul>
  );
}

key: la etiqueta de nombre que React utiliza para diferenciar los elementos

Para las claves —es decir, las etiquetas de nombre que React utiliza para distinguir los elementos—, defina los parámetros de entrada, el responsable de la etapa y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la etapa desde un punto de control conocido sin tener que adivinar el estado oculto. Guarde la configuración fuera del código de la aplicación. Los archivos de entorno, los almacenes de datos secretos y las banderas de funcionalidad deben encontrarse en un lugar que los operadores puedan auditar. Las listas de claves deben ser identificadores empresariales estables, y no índices de array, cuando el orden pueda cambiar.

Warning: Each child in a list should have a unique "key" prop.

Las claves deben ser “estables y únicas”

Para que las claves sean “estables y únicas”, defina los parámetros de entrada, el responsable del paso y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar el paso a partir de un punto de control conocido sin tener que adivinar el estado oculto. Documente tanto la ruta normal como la ruta de recuperación. Las reintentos y el manejo de mensajes no entregados forman parte del producto. Las listas de claves deben ser identificadores empresariales estables, y no índices de array, cuando el orden puede cambiar.

<li key={product.id}>   // ✅ each product's unique id — stable

Advertencia: No utilice el índice de array como clave

Para Trap: no utilice el índice del array como clave. Defina las entradas, el responsable de la tarea y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la tarea desde un punto de control conocido sin tener que adivinar el estado oculto. Prefiera unidades pequeñas y verificables en lugar de scripts extensos. Cuando una tarea falla, el error debe indicar claramente cuál es la responsabilidad correspondiente. Las claves de las listas deben ser identificadores empresariales estables, y no índices de array, cuando el orden pueda cambiar. Para Trap: no utilice el índice del array como clave. Defina las entradas, el responsable de la tarea y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la tarea desde un punto de control conocido sin tener que adivinar el estado oculto. Registre los tiempos y costos junto con los resultados funcionales. Tener visibilidad desde el principio evita facturas inesperadas en entornos compartidos.

// 🔴 common but dangerous pattern
{products.map((product, index) => (
  <li key={index}>{product.name}</li>
))}

Combinándolo todo: condicional + lista

Para armarlo todo: Condicional + Lista. Defina las entradas, el responsable de la etapa y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la etapa desde un punto de control conocido sin tener que adivinar el estado oculto. Mantenga la configuración fuera del código de la aplicación. Los archivos de entorno, los almacenes de secretos y las banderas de funcionalidad deben estar en un lugar que los operadores puedan auditar. Coloque los tipos junto con los componentes y mantenga las propiedades específicas. Un gran número de propiedades genera la deuda que TypeScript está diseñado para evitar.

type Product = {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
};

function ProductList({ products }: { products: Product[] }) {
  // when the list is empty — conditional rendering
  if (products.length === 0) {
    return <p>No products to display.</p>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — {product.price.toLocaleString()} won
          {/* badge only when out of stock — && (safe since the left side is boolean) */}
          {!product.inStock && <span className="badge"> (Out of stock)</span>}
        </li>
      ))}
    </ul>
  );
}

// dummy data — swap in an empty array [] to see the "No products" message
const products: Product[] = [
  { id: 1, name: 'Mechanical Keyboard', price: 89000, inStock: true },
  { id: 2, name: 'Wireless Mouse', price: 42000, inStock: false },
  { id: 3, name: 'USB-C Hub', price: 35000, inStock: true },
];

function App() {
  return <ProductList products={products} />;
}

Conclusión

Para concluir, defina las entradas, el responsable de la etapa y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la etapa desde un punto de control conocido sin tener que adivinar el estado oculto. Documente tanto la ruta óptima como la ruta de recuperación. Las reintentos y el manejo de mensajes no entregados forman parte del producto. Asocie los tipos con los componentes y mantenga las propiedades específicas. Un gran número de propiedades genera la deuda que TypeScript está diseñado para evitar.

Referencias

Como referencia, defina las entradas, el responsable de la tarea y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la tarea desde un punto de control conocido sin tener que adivinar el estado oculto. Prefiera unidades pequeñas y verificables en lugar de scripts extensos. Cuando una tarea falla, el error debe indicar una única responsabilidad. Coloque los tipos junto a los componentes y mantenga las propiedades específicas. Un gran número de propiedades genera la deuda que TypeScript está diseñado para evitar. Como referencia, defina las entradas, el responsable de la tarea y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar la tarea desde un punto de control conocido sin tener que adivinar el estado oculto. Registre los tiempos y costos junto con los resultados funcionales. La visibilidad temprana evita facturas inesperadas en entornos compartidos.

Lista de verificación operativa

Para la lista de verificación operativa, defina las entradas, el responsable de cada paso y los criterios de finalización antes de modificar el código. Los operadores deben poder volver a ejecutar el paso a partir de un punto de control conocido sin tener que adivinar el estado oculto.

Trate esta etapa como un contrato entre las entradas y los resultados validados. Asigne nombres a los artefactos, defina comprobaciones de éxito y rechace las completaciones parciales silenciosas.

Prefiera el renderizado condicional explícito a los atajos ingeniosos que ocultan errores en producción.

Prefiera una fiabilidad sencilla a demostraciones únicas y elaboradas.

Registre los tiempos y costos junto con los resultados funcionales. La visibilidad temprana evita facturas inesperadas en entornos compartidos.

Prefiera el renderizado condicional explícito a los atajos ingeniosos que ocultan errores en producción.

Antes de promocionar el stack, congele las versiones, capture una transcripción de referencia para la ruta crítica y confirme los pasos de reversión. Los entornos compartidos requieren límites de velocidad, verificaciones de tenencia y un responsable claro para la rotación de credenciales secretas.

Lecturas relacionadas

• Vista previa de JSX en Windows sin instalar React o VS Code — JSX no se abrirá como página web al hacer doble clic. Cuando solo necesita inspeccionar o comparar un componente, una herramienta de vista previa dedicada para Windows puede ser más útil que crear un proyecto React completo desde cero.
• Vista previa de JSX sin crear primero un proyecto React — JSX no es HTML que se pueda abrir con doble clic; Preview Kit y herramientas similares separan la generación de la vista previa del setup completo de Node y React, de modo que los componentes experimentales permanezcan temporales.

Manejo de eventos en React: Eventos sintéticos sin misterios — Delegación, propiedades de los manejadores y patrones eficaces para responder a las acciones del usuario, sin lidiar con los mitos sobre el sistema de eventos sintéticos de React.