Cómo utilizar el gancho useState de React

¡Descubre para qué es útil el gancho useState de React y cómo trabajar con él!

Primero, consulta mi introducción a los ganchos de React, si eres nuevo en ellos.

Un gancho de React que uso con más frecuencia es useState.

import React, { useState } from 'react'

Con la useState()API, puedes crear una nueva variable de estado y tener una forma de modificarla. useState()acepta el valor inicial del elemento de estado y devuelve una matriz que contiene la variable de estado y la función que llamas para modificar el estado. Dado que devuelve una matriz, utilizamos la desestructuración de matrices para acceder a cada elemento individual, de esta manera:const [count, setCount] = useState(0)

He aquí un ejemplo práctico:

import { useState } from 'react'const Counter = () = { const [count, setCount] = useState(0) return ( div pYou clicked {count} times/p button onClick={() = setCount(count + 1)}Click me/button /div )}ReactDOM.render(Counter /, document.getElementById('app'))

Puedes agregar tantas useState()llamadas como quieras para crear tantas variables de estado como quieras. Solo asegúrese de llamarlas en el nivel superior de un componente (no en un ifbloque ni en ningún otro).Te recomendamos Tienda consolas retro

Ejemplo en Codepen:

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo utilizar el gancho useState de React

Primero, consulta mi introducción a los ganchos de React, si eres nuevo en ellos. ¡Descubre para qué es útil el gancho useState de React y cómo trabajar c

programar

es

2025-01-20