CÓMO ALTERNAR ELEMENTOS EN REACT CON HOOKS
Introducción a la alternancia de elementos en React
Alternar elementos en una aplicación web es una funcionalidad esencial para mejorar la interactividad y la experiencia del usuario. En React, esta tarea se puede lograr de varias maneras, especialmente utilizando Hooks como useState, que permiten gestionar el estado de manera eficiente. Este tutorial explora cinco métodos diferentes para implementar la funcionalidad de alternancia en una aplicación React: operadores lógicos, el Hook personalizado useToggle, operadores ternarios, sentencias if/else y estilos condicionales con CSS. Cada método se explica con ejemplos prácticos y código, asegurando que los desarrolladores puedan aplicar estas técnicas en sus proyectos. Este artículo está dirigido a programadores que deseen mejorar sus habilidades en el desarrollo de interfaces dinámicas con React, utilizando herramientas modernas y enfoques escalables.
Antes de comenzar, es necesario configurar un proyecto React para probar los ejemplos. A continuación, se detalla cómo preparar el entorno y luego se exploran los cinco métodos para alternar elementos.
Configuración del proyecto React
Para comenzar, necesitas tener Node.js y NPM instalados. Puedes descargar la versión recomendada desde el sitio oficial de Node.js. Una vez instalado, verifica las versiones ejecutando los siguientes comandos en tu terminal:
node -v
npm -v
Estos comandos mostrarán las versiones instaladas de Node.js y NPM. Asegúrate de que estén actualizadas para evitar problemas de compatibilidad. Luego, instala Create React App, una herramienta que facilita la creación de proyectos React:
npm install create-react-app
Crea un nuevo proyecto con el siguiente comando:
npx create-react-app toggle
cd toggle
code .
Este comando genera un proyecto llamado “toggle”, navega al directorio creado y abre el proyecto en tu editor de código. La estructura inicial del proyecto será similar a esta:
toggle/
├── node_modules/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── manifest.json
├── src/
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── README.md
Para mejorar el diseño de la aplicación, se utilizará Bootstrap 5. Agrega el enlace CDN de Bootstrap en el archivo public/index.html dentro de la sección <head>:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
Este enlace asegura que los estilos de Bootstrap estén disponibles en el proyecto. Ahora, crea una carpeta components dentro de src para organizar los archivos de los componentes que se crearán para cada método de alternancia.
Alternar elementos con operadores lógicos
El primer método utiliza el operador lógico not (!) junto con el operador && para alternar la visibilidad de un elemento. Este enfoque es simple y directo, ideal para casos en los que deseas mostrar u ocultar elementos basándote en una condición booleana.
Crea un archivo LogicalNot.js en la carpeta components y agrega el siguiente código:
import React, { useState } from "react";
const LogicalNot = () => {
const [toggle, setToggle] = useState(true);
return (
<>
<button
onClick={() => setToggle(!toggle)}
className="btn btn-primary mb-5"
>
Alternar Estado
</button>
{toggle && (
<ul className="list-group">
<li className="list-group-item">Elemento 1</li>
<li className="list-group-item">Elemento 2</li>
<li className="list-group-item">Elemento 3</li>
<li className="list-group-item">Elemento 4</li>
<li className="list-group-item">Elemento 5</li>
</ul>
)}
</>
);
};
export default LogicalNot;
En este código, se importa el Hook useState para gestionar el estado de la variable toggle, inicializada como true. El botón utiliza un evento onClick que invierte el valor de toggle usando el operador lógico not (!). La lista se renderiza condicionalmente con el operador &&, mostrando los elementos solo si toggle es true.
Para mostrar este componente, actualiza el archivo src/App.js:
import "./App.css";
import LogicalNot from "./components/LogicalNot";
function App() {
return (
<div className="App mt-5">
<LogicalNot />
</div>
);
}
export default App;
Al ejecutar el proyecto con npm start, verás un botón que alterna la visibilidad de una lista al hacer clic. Este método es ideal para componentes simples donde la gestión de estado es mínima.
Alternar elementos con el Hook useToggle
Crear un Hook personalizado como useToggle permite encapsular la lógica de alternancia, haciendo el código más reutilizable y mantenible. Este método es útil cuando necesitas alternar estados en múltiples componentes.
Crea un archivo ToggleHook.js en la carpeta components con el siguiente código:
import React, { useState } from "react";
const useToggle = (initialState = false) => {
const [toggleValue, setToggleValue] = useState(initialState);
const toggler = () => setToggleValue(!toggleValue);
return [toggleValue, toggler];
};
const ToggleHook = () => {
const [toggle, setToggle] = useToggle();
return (
<div>
<button onClick={setToggle} className="btn btn-secondary mb-5">
Alternar Estado
</button>
{toggle && (
<ul className="list-group">
<li className="list-group-item">Elemento 1</li>
<li className="list-group-item">Elemento 2</li>
<li className="list-group-item">Elemento 3</li>
<li className="list-group-item">Elemento 4</li>
<li className="list-group-item">Elemento 5</li>
</ul>
)}
</div>
);
};
export default ToggleHook;
El Hook useToggle toma un estado inicial (por defecto false) y devuelve un array con el valor del estado y una función para alternarlo. La función toggler invierte el estado usando el operador not (!). En el componente, se usa useToggle para crear las variables toggle y setToggle, que se aplican al botón y a la renderización condicional de la lista.
Actualiza App.js para incluir este componente:
import "./App.css";
import ToggleHook from "./components/ToggleHook";
function App() {
return (
<div className="App mt-5">
<ToggleHook />
</div>
);
}
export default App;
Este enfoque mejora la reutilización del código, ya que el Hook useToggle puede usarse en cualquier componente que requiera alternancia.
Alternar elementos con el operador ternario
El operador ternario ofrece una sintaxis concisa para manejar condiciones en el renderizado. Es una alternativa al operador && cuando necesitas renderizar diferentes elementos según el estado.
Crea un archivo TernaryOperator.js en la carpeta components:
import React, { useState } from "react";
const TernaryOperator = () => {
const [toggle, setToggle] = useState(true);
const handleClick = () => {
setToggle(!toggle);
};
return (
<div>
<button onClick={handleClick} className="btn btn-info mb-5">
Alternar Estado
</button>
{toggle ? (
<ul className="list-group">
<li className="list-group-item">Elemento 1</li>
<li className="list-group-item">Elemento 2</li>
<li className="list-group-item">Elemento 3</li>
<li className="list-group-item">Elemento 4</li>
<li className="list-group-item">Elemento 5</li>
</ul>
) : (
<></>
)}
</div>
);
};
export default TernaryOperator;
En este ejemplo, el operador ternario (?:) renderiza la lista si toggle es true y un fragmento vacío (<></>) si es false. La función handleClick invierte el estado al hacer clic en el botón. Actualiza App.js para probar este componente:
import "./App.css";
import TernaryOperator from "./components/TernaryOperator";
function App() {
return (
<div className="App mt-5">
<TernaryOperator />
</div>
);
}
export default App;
El operador ternario es ideal para casos donde necesitas renderizar contenido alternativo basado en una condición, manteniendo el código limpio y legible.
Alternar elementos con sentencias if/else
Las sentencias if/else permiten un control más explícito sobre el renderizado condicional, especialmente útil cuando la lógica de alternancia requiere múltiples condiciones o elementos.
Crea un archivo IfElse.js en la carpeta components:
import React, { useState } from "react";
const IfElse = () => {
const [toggle, setToggle] = useState(true);
const handleClick = () => {
setToggle(!toggle);
};
if (toggle) {
return (
<div>
<button onClick={handleClick} className="btn btn-dark mb-5">
Alternar Estado
</button>
<ul className="list-group">
<li className="list-group-item">Elemento 1</li>
<li className="list-group-item">Elemento 2</li>
<li className="list-group-item">Elemento 3</li>
<li className="list-group-item">Elemento 4</li>
<li className="list-group-item">Elemento 5</li>
</ul>
</div>
);
} else {
return (
<div>
<button onClick={handleClick} className="btn btn-dark mb-5">
Alternar Estado
</button>
</div>
);
}
};
export default IfElse;
En este código, la sentencia if renderiza el botón y la lista cuando toggle es true, mientras que la sentencia else solo renderiza el botón cuando toggle es false. Actualiza App.js para incluir este componente:
import "./App.css";
import IfElse from "./components/IfElse";
function App() {
return (
<div className="App mt-5">
<IfElse />
</div>
);
}
export default App;
Este método es útil para casos donde la lógica de renderizado es más compleja, aunque puede resultar menos elegante para alternancias simples debido a la verbosidad.
Alternar elementos con estilos condicionales CSS
El último método utiliza estilos condicionales CSS para alternar la visibilidad de un elemento manipulando la propiedad display. Este enfoque es ideal cuando deseas mantener el elemento en el DOM pero ocultarlo visualmente.
Crea un archivo ConditionalCSS.js en la carpeta components:
import React, { useState } from "react";
const ConditionalCSS = () => {
const [toggle, setToggle] = useState(true);
const handleClick = () => {
setToggle(!toggle);
};
return (
<div>
<button onClick={handleClick} className="btn btn-warning mb-5">
Alternar Estado
</button>
<ul
className="list-group"
style={{ display: toggle ? "block" : "none" }}
>
<li className="list-group-item">Elemento 1</li>
<li className="list-group-item">Elemento 2</li>
<li className="list-group-item">Elemento 3</li>
<li className="list-group-item">Elemento 4</li>
<li className="list-group-item">Elemento 5</li>
</ul>
</div>
);
};
export default ConditionalCSS;
Aquí, el atributo style en el elemento ul usa un operador ternario para establecer la propiedad display en block o none según el valor de toggle. Actualiza App.js para probar este componente:
import "./App.css";
import ConditionalCSS from "./components/ConditionalCSS";
function App() {
return (
<div className="App mt-5">
<ConditionalCSS />
</div>
);
}
export default App;
Este método es eficiente para alternar la visibilidad sin eliminar elementos del DOM, lo que puede ser útil para animaciones o para mantener el estado del componente.
Conclusiones
Alternar elementos en React es una habilidad fundamental para crear interfaces dinámicas y reactivas. Este tutorial ha cubierto cinco métodos para implementar esta funcionalidad: operadores lógicos, el Hook personalizado useToggle, operadores ternarios, sentencias if/else y estilos condicionales con CSS. Cada método tiene sus ventajas: los operadores lógicos son simples y rápidos, el Hook useToggle fomenta la reutilización, los operadores ternarios ofrecen flexibilidad en el renderizado, las sentencias if/else permiten lógica compleja, y los estilos condicionales son ideales para manipulaciones visuales sin afectar el DOM. Al elegir un método, considera la complejidad de tu componente y los requisitos de mantenibilidad. Con estos conocimientos, puedes implementar alternancias efectivas en tus proyectos de React, mejorando la experiencia del usuario y la calidad del código.
