Componente de procesamiento a través del controlador de eventos onClick en React

En este artículo, veremos cómo configurar los componentes de React para renderizar componentes dinámicamente cada vez que el usuario haga clic en un botón.

Componente de procesamiento a través del controlador de eventos onClick en React

Al crear aplicaciones web en React, es posible que desee representar componentes condicionalmente en función de la entrada del usuario. Esto es posible almacenando la entrada del usuario en una variable de estado.

Los componentes funcionales de React devuelven código JSX, lo que le permite renderizar (o no renderizar) componentes en función del valor de las variables de estado.

Para representar componentes de forma condicional, puede utilizar estas dos funciones y el operador ternario de JavaScript.

Código:

export default function App() {
  const [showComponent, setShowComponent] = useState(true);
  return (
    <div className="App">
      {showComponent ? <Box /> : ""}
      <button onClick={() => setShowComponent(!showComponent)}>
        Hide and show Box
      </button>
    </div>
  );
}

Producción:

Demo en vivo

En el fragmento anterior, usamos el enlace useState() para inicializar una variable de estado showComponent en true. También creamos otra variable, setShowComponent, que almacenará una referencia a la función que actualiza la variable de estado.

En JSX, escribimos una expresión de JavaScript, que evalúa la variable showComponent y representa el componente <Box /> si es verdadero. Si no, generará una cadena vacía.

Para escribir expresiones de JavaScript dentro de JSX, debe envolverlas con llaves ({}).

Configuramos el controlador de eventos onClick() para actualizar el valor de la variable de estado showComponent cada vez que alguien hace clic en un botón. Establecemos el valor de la variable de estado en el opuesto del valor actual.

Si de momento es true, se renderiza la caja. Al hacer clic en el botón, se establece en false y el cuadro ya no se muestra.

Observe cómo cambia la posición del elemento DOM <Button>. Esto se debe a que, según el valor de la variable showComponent, el componente <Box> (que es un div con altura y ancho fijos) se representa (o no se representa).