⚖️ Cómo implementar condicionales y lógica en JSX de manera clara

⚖️ Cómo implementar condicionales y lógica en JSX de manera clara

En JSX, podemos insertar lógica y condicionales dentro de nuestras interfaces usando expresiones de JavaScript. Esto nos permite renderizar elementos de manera dinámica según el estado o las propiedades del componente.

---

1️⃣ Condicional simple con operador ternario

El operador ternario condición ? valorSiTrue : valorSiFalse es ideal para mostrar contenido según una condición.

function Greeting(props) {
  return (
    <div>
      <h1>Hola, {props.isLoggedIn ? "Usuario" : "Invitado"}!</h1>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Greeting isLoggedIn={true} />);
  

✅ Si isLoggedIn es true, se muestra “Usuario”; si es false, “Invitado”.

Visual: Hola, Usuario!

---

2️⃣ Renderizado condicional usando &&

Podemos usar && para renderizar un elemento solo si la condición es verdadera:

function WarningMessage(props) {
  return (
    <div>
      {props.showWarning && <div className="alert alert-warning">¡Cuidado!</div>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<WarningMessage showWarning={true} />);
  

¡Cuidado!

---

3️⃣ Función para lógica más compleja

Si la lógica es más compleja, es mejor definir una función dentro del componente:

function UserStatus(props) {
  function getStatusMessage() {
    if(props.points >= 100) return "Nivel Avanzado";
    if(props.points >= 50) return "Nivel Intermedio";
    return "Nivel Principiante";
  }

  return (
    <div>
      <p>Estado del usuario: {getStatusMessage()}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<UserStatus points={75} />);
  

Estado del usuario: Nivel Intermedio

---

4️⃣ Uso de condicionales en listas

También podemos filtrar o mostrar elementos condicionalmente en listas usando map() y condicionales:

function TodoList(props) {
  return (
    <ul>
      {props.todos.map(todo => (
        !todo.completed && <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

const todos = [
  { id: 1, text: "Aprender React", completed: true },
  { id: 2, text: "Practicar JSX", completed: false }
];

ReactDOM.createRoot(document.getElementById('root')).render(<TodoList todos={todos} />);
  

• Practicar JSX

💡 Este enfoque mantiene el código limpio y fácil de mantener.

← Volver al índice