Hola hoy vamos a hablar de uno de los hook mas importante que tiene React que es el useState, y el que mas también comúnmente se usa, si el proyecto tiene interactividad y necesitas actualizar el estado de un componente especifico. Antes que nada te estarás preguntando
pero que son los hooks : son funciones especiales que nos permiten usar características de React con componentes funcionales.
que es useState : es un hook que nos permite agregarle un estado a un componente funcional
veamos mejor un ejemplo para que lo entiendas mejor.
- importamos los estilos css para centrar y darle color.
- creamos una constante CounterApp con una función flecha que devuelve con el return un div al cual le agregue una clase app para darte estilo.
- agregamos un h2 para el titulo en este caso dice counter.
- un h3 vació ahí ira el numero que mostrara en pantalla nuestro contador, como estamos insertado javascript lo ponemos entre llaves {}.
- pusimos un botón con una clase one para darle estilo y a este le pusimos un +1 para saber que hace dicho botón.
- cerramos el div de app.
- por ultimo hay que exportar default counterApp para poder visualizarlo.
con esto ya tenemos la estructura básica de nuestro contador ahora vamos a ir agregándole mas funcionalidad.
a nuestro botón le agregamos un evento onClick que hará que cuando le demos click al botón +1 dispare la función handelAdd.
la constante handelAdd tiene una función de flecha en la cual por ahora le paso el evento y que devuelve un console.log con el evento.
ya es hora de trabajar con el hook useState
- importe este de react de la siguiente manera:
ahora que ya hemos importado useState dentro de la constante CounterApp vamos a agregar una constante, esa constante va a ser un arreglo con 2 elementos importante abrimos corchetes y dentro le pasamos counter y setCounter cerramos corchetes ponemos un igual a useState abrimos paréntesis y le ponemos cero que es el numero inicial de nuestro estado(cero va a ser el numero inicial de counter), cerramos paréntesis.
el código quedaría así:
expliquemos esto, que es cada cosa :
counter : el el valor que queremos usar como el estado, por ejemplo nuestra aplicación tiene un estado que es counter ese es un estado que vamos a guardar, vamos a usar y vamos a actualizar.
setCounter: es una función que nos va a permitir actualizarlo.
Siempre por convención se utiliza set por ejemplo si tenemos
const [nombre, setNombre] = useState();
con la funcion setCounter vamos a poder actualizar el numero de counter.
ahora que queremos hacer cuando se haga click en el botón +1 en este caso queremos que a counter se incremente en uno (quiero sumarle 1) y luego quiero asignar ese valor al estado de mi componente (mi aplicación).
como lo podemos hacer, con los dos elementos que acabamos de crear, de esta forma :
usamos esta función la llamamos, que valor le vamos a pasar como argumento,el nuevo valor que le vamos a asignar al counter, en este caso va a ser counter +1 lo vamos a actualizar y esta llamada a la función va a actualizar ese estado y solo va actualizar lo que es necesario, debido a ese cambio en la interfaz de usuario, toda esa actualización ocurre automáticamente, se vuelve a renderizar lo que se necesita renderizar.
Ahora ya tenemos nuestro botón funcionando, agreguemos uno para resetearlo a cero
agreguemos un nuevo botón con la clase one para que tenga los mismos estilos que el botón anterior también le pondremos un evento onClick al cual le pasaremos la función handelReset.
llamemos a la función setCounter, esta es la función que tenemos que llamar cada vez que queremos actualizar el counter en este caso como argumento para hacer un reset de nuestro counter le pasaremos cero.
que ocurre si queremos hacer un botón que reste, en este caso seria igual al botón que suma
espero que les sirva un poco para entender un poco mas el tema de el hook useState de React,
si te gusto sígueme para mas contenido de programación y comparte para poder llegar a mas personas.
Gracias.