🔀 Condicionales en componentes React para renderizado dinámico

🔀 Condicionales en componentes React para renderizado dinámico

En React, podemos mostrar u ocultar elementos de manera dinámica usando condicionales. Esto permite que la interfaz cambie según el estado o los datos recibidos.

---

1️⃣ Condicional simple con operador ternario

Ejemplo básico que muestra un mensaje según un estado booleano:

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

  return (
    <div>
      {isLoggedIn ? <h2>Bienvenido de nuevo!</h2> : <h2>Por favor, inicia sesión</h2>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>Toggle Login</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Por favor, inicia sesión

---

2️⃣ Renderizado condicional con &&

Si solo queremos renderizar un elemento cuando la condición sea verdadera:

function App() {
  const [showMessage, setShowMessage] = React.useState(true);

  return (
    <div>
      {showMessage && <p>Este mensaje solo aparece si showMessage es true</p>}
      <button onClick={() => setShowMessage(!showMessage)}>Mostrar/Ocultar</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Este mensaje solo aparece si showMessage es true

---

3️⃣ if-else dentro de funciones

También se puede usar un condicional if-else dentro de la función antes del return:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Hola, usuario!</h2>;
  } else {
    return <h2>Bienvenido, por favor regístrate</h2>;
  }
}

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

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>Toggle Login</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

---

4️⃣ Mejores prácticas

• ✅ Usar operadores ternarios para condicionales simples dentro del JSX.
• ✅ Usar && para renderizar elementos opcionales.
• ✅ Para lógicas más complejas, crear funciones auxiliares o componentes separados.
• ✅ Mantener el JSX limpio evitando demasiados condicionales anidados.

💡 Con estas técnicas, tus componentes pueden adaptarse dinámicamente a cualquier estado o condición.

← Volver al índice