Imagina que tienes una caja de juguetes, en ella se pueden guardar todos los juguetes que quieras, y cuando quieras jugar con alguno de ellos, solo tienes que abrir la caja y sacarlo. En React, la caja de juguetes es el estado, y los juguetes son los datos que queremos guardar en el estado. Para manipular el estado, React nos provee de un hook llamado useState.
Por ahora no nos preocuparemos de que es un hook, pensemos en él como una función que nos devuelve dos cosas: el valor actual del estado y una función para actualizarlo. Y se ve algo así:
const [miCajaDeJuguetes, guardarJuguetes] = useState([]);
En esta línea de código miCajaDeJuguetes es el valor actual del estado, y guardarJuguetes es la función que nos permite actualizarlo. La caja en principio está vacía (por eso escribimos []), pero podemos llenarla con juguetes más tarde.
Imagina que tenemos un Yo-yo que queremos guardar en la caja de juguetes. Podemos hacerlo de la siguiente manera:
guardarJuguetes([...miCajaDeJuguetes, '🪀']);
Como vemos, llamamos a la función guardarJuguetes, que nos devuelve useState para actualizar el estado, o en este caso el contenido de nuestra caja de juguetes. Como primer parametro del array utilizamos el spreadOperator ...miCajaDeJuguetes, que significa que estamos guardando todo lo que ya estaba en la caja, y luego, como segundo parametro, agregamos el nuevo yo-yo.
Con la misma función podemos vaciar la caja de juguetes:
guardarJuguetes([]);
Para leer todo el articulo puedes ir a nuestro blog: https://www.huasi.dev/blog/use-state-la-caja-de-juguetes
Top comments (0)