Unir estados en React es una práctica muy común cuando queremos simplificar nuestros componentes que tienen más de un estado. Esta práctica suele funcionar aún mejor cuando los estados tienen lógicas similares y se ejecutarán al mismo tiempo. En ese post, te enseñaremos cómo unir estados en React para que uses esta práctica en tus propias aplicaciones.
¿Qué es unir estados en React?
Para entender la práctica de unir estados en React, te pondremos un ejemplo. Supongamos que tenemos un proyecto en el que queremos simular una aplicación como Twitter. Entonces, hemos aprendido a crear una página de login en React con dos input, uno para el usuario y otro para la contraseña.
Recuerda que una página de login es básicamente un formulario que le permite al usuario insertar sus datos. Aquellos datos, después, serán procesados por nuestro servidor. Si quieres aprender más sobre este tema, te invitamos a leer nuestro post sobre formularios en React. Además, te recomendamos leer nuestros posts sobre controlar input en React y evento onChange en React para entender el uso de los estados, el value y el evento onChange en las siguientes líneas de código:
function LoginPage ( ) {
const [username, setUsername] = useState (‘ ‘);
const [password, setPassword] = useState (‘ ‘);
return (
<div className= «loginPage»>
<h1 className= «loginPage-title»> Log in to Twitter </h1>
<form>
<input>
type= «text»
name= «username»
value= {username}
onChange = {event => {
setUsername (event.target.value»);
})
/>
<input>
type= «password»
name= «password»
value={password}
onChange = {event => {
setPasword (event.target.value»);
})
/>
En las anteriores líneas de código, estamos controlando el valor de nuestro input con la ayuda de dos estados, un estado para cada input. En este tipo de formulario sencillo, este método de control es útil. Sin embargo, imaginemos que tenemos un formulario con diez input. Entonces, tener un estado para cada uno puede volverse largo y tedioso. Por ello, solemos unir estados en React. Esta práctica funciona muy bien cuando queremos simplificar un código en el que los dos estados se van a procesar al mismo tiempo.
En nuestro caso, cuando hacemos clic en el botón de login, vamos a procesar tanto el input de usuario como el de contraseña. Por ello, tiene sentido manejar sus dos estados desde uno solo. A continuación, te enseñamos cómo hacerlo.
¿Cómo unir estados en React?
Para unir estados en React, lo primero que debemos hacer es eliminar uno de los dos estados. Luego, inicializamos el estado base como un objeto. En nuestro ejemplo anterior, estábamos inicializando el estado con un string vacío, representado por las comillas. Para inicializar un estado como objeto, usamos los corchetes { }. En este objeto, tendremos dos claves, una para cada uno de los datos que queremos manejar.
Como en nuestro ejemplo estábamos manejando un estado username y otro password, estos serán las claves del objeto con el que inicializaremos el nuevo estado. Estas dos claves serán inicializadas con un string vacío. A continuación, puedes ver cómo se encuentra nuestro nuevo estado por el momento:
const [username, setUsername] = useState ({username: ‘ ‘, password: ‘ ‘})
Ahora, como estamos usando el estado anterior username para unir estados en React, deberemos cambiarle el nombre. En nuestro caso, los dos estados que estamos uniendo actúan como credenciales, por lo que llamaremos a este estado credentials. Este estado tendrá, a su vez, una función setCredentials:
const [credentials, setCredentials] = useState ({
username: ‘ ‘,
password: ‘ ‘,
});
Ten muy presente el contexto en el que decides unir estados en React. En nuestro caso, tiene sentido ejecutar esta estrategia, porque todos los datos del formulario se procesan juntos. No te recomendamos usar esta práctica cada vez que tengas dos estados, pues estos pueden tener lógicas y funciones muy diferentes. De hecho, si tus estados no tienen nada que ver, es mejor no unirlos.
Ahora que hemos modificado la forma en la que definimos nuestro estado, deberemos cambiar la forma en la que definimos las propiedades value de nuestros input. Antes, cada propiedad dependía del estado a su nombre, pero ahora dependerá de la clave a su nombre dentro del objeto credentials. Por ello, usaremos el comando credentials.clave para acceder a cada valor. Además, cambiaremos las funciones dentro del evento onChange. Entonces, tanto setUsername como setPassword pasarán a ser setCredentials.
¿Cuál es el siguiente paso?
Tras leer este post, sabes exactamente cómo unir estados en React para simplificar tu desarrollo de código. Ahora, el siguiente paso en el proceso a dominar esta y otras herramientas de programación para la web es dedicarte por completo a tu aprendizaje. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con herramientas como React, JavaScript, HTML y CSS. ¿A qué esperas para dar el siguiente paso y convertirte en un experto del desarrollo web? ¡No lo dudes más e inscríbete!
