Eventos y renderizado condicional

Reacciona a las acciones del usuario y muestra u oculta elementos según condiciones.

8 min · 3 preguntas

Un evento es una acción del usuario: un clic, una tecla pulsada, el envío de un formulario... En React, escuchas un evento pasando una función a una prop especial: onClick para los clics, onChange al escribir, y así sucesivamente. Fíjate en la escritura en camelCase: onClick con C mayúscula, no onclick como en HTML.

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here
    </button>
  );
}

La segunda herramienta de esta lección es el renderizado condicional, es decir, mostrar cosas diferentes según una condición. Como un cartel de tienda que dice "Abierto" o "Cerrado", un componente puede elegir qué mostrar. La herramienta más común es el operador ternario: condition ? valueIfTrue : valueIfFalse, una forma compacta de escribir "si... si no...".

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

¿Y qué hay de mostrar algo o nada en absoluto? Usas el operador &&: en condition && element, el elemento solo se muestra si la condición es verdadera. Si es falsa, React simplemente no renderiza nada, sin error.

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué prop usas para reaccionar a un clic en React?
   • onclick
   • onClick
   • clickEvent
2. ¿Por qué escribir onClick={handleClick} sin paréntesis?
   • Porque los paréntesis están prohibidos en JSX
   • Para que la página cargue más rápido
   • Para que la función se ejecute al hacer clic, no al renderizar
3. ¿Qué muestra {isVisible && <p>Info</p>} si isVisible es false?
   • Nada en absoluto
   • El párrafo Info se muestra igualmente
   • React muestra un mensaje de error