Renderizado condicional en react

En React, el renderizado condicional permite mostrar u ocultar componentes o partes de la UI en función de alguna condición. Hay varias formas de hacerlo, cada una con sus pros y contras según el caso. Aquí te dejo un resumen con ejemplos:

Prerrequisitos

• Instalación react se explica a detalle como instar y configurar un entono de trabajo para react.
• Estructura de un proyecto React    Conocer los archivos principales, index.js, App.js, carpetas, etc.
• JSX  Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
• En el post de componentes en React se dan los primeros pasos para crear un componente.

Crear un proyecto de prueba

Antes de explicar los Hooks, vamos a crear un proyecto react para realizar los ejercicios que explicaremos a continuación:

npm create vite@latest

Donde seleccionamos:

> npx
> create-vite
|
o  Project name:
|  practicas-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  TypeScript

Por ultimo, ejecutamos

cd practicas-react
npm install
npm run dev

Vamos a crear un directorio llamado components en el directorio src donde crearemos los componentes de los siguientes ejemplos:

✅ Usando if (estructura clásica)

Para el siguiente ejemplo, creamos un componente llamado EjemploIfElse donde colocamos el siguiente código.

export default function EjemploIfElse({ esAdmin }: { esAdmin: string }) {
  if (esAdmin) {
    return <h1>Bienvenido, Administrador</h1>;
  } else {
    return <h1>Bienvenido, Usuario</h1>;
  }
}

Podemos observar que usamos un if con una condición donde se identifica si es edmin, liego en el main se llama este componente y se prueba. 

import "./App.css";
import EjemploIfElse from "./components/EjemploIfElse";
function App() {
  
  return (
    <div style={{ padding: "40px" }}>
      <EjemploIfElse esAdmin="user"  />
    </div>
  );
}

export default App;

✅ Usando operador ternario condición ? true : false

Ideal para condiciones simples dentro del JSX.

function Mensaje({ conectado }) {
  return (
    <div>
      {" "}
      {conectado ? <p>Estás conectado</p> : <p>No estás conectado</p>}{" "}
    </div>
  );
}

✅ Usando el operador lógico &&

Solo se renderiza si la condición es verdadera.

function Alerta({ mostrar }) {
  return <div> {mostrar && <p>¡Esto es una alerta!</p>} </div>;
}

⚠️ Este método no muestra nada si la condición es falsa.

✅ Mostrar/Ocultar Componentes

Puedes controlar si un componente se renderiza con una condición o incluso con un estado.

function App() {
  const [mostrarDetalle, setMostrarDetalle] = React.useState(false);
  return (
    <div>
      {" "}
      <button onClick={() => setMostrarDetalle(!mostrarDetalle)}>
        {" "}
        {mostrarDetalle ? "Ocultar Detalles" : "Mostrar Detalles"}{" "}
      </button>{" "}
      {mostrarDetalle && <Detalles />}{" "}
    </div>
  );
}

function Detalles() {
  return <p>Estos son los detalles importantes.</p>;
}

✅ Retornar null para ocultar

Un componente puede retornar null para no renderizar nada.

function MensajePrivado({ esVisible }) {
  if (!esVisible) return null;
  return <p>Este es un mensaje privado.</p>;
}