diff --git a/beta/src/content/apis/react/useState.md b/beta/src/content/apis/react/useState.md
index 7a7df1d2f..f3cbb7ca5 100644
--- a/beta/src/content/apis/react/useState.md
+++ b/beta/src/content/apis/react/useState.md
@@ -1,13 +1,13 @@
---
-title: useState
+titulo: useState
---
-`useState` is a React Hook that lets you add a [state variable](/learn/state-a-components-memory) to your component.
+`useState` es un React Hook que le permite agregar una [variable de estado](/learn/state-a-components-memory) a su componente.
```js
-const [state, setState] = useState(initialState)
+const [estado, setEstado] = useState(estadoInicial)
```
@@ -16,74 +16,74 @@ const [state, setState] = useState(initialState)
---
-## Usage {/*usage*/}
+## Uso {/*uso*/}
-### Adding state to a component {/*adding-state-to-a-component*/}
+### Agregar estado a un componente {/*agregar-estado-a-un-componente*/}
-Call `useState` at the top level of your component to declare one or more [state variables.](/learn/state-a-components-memory)
+Llamar `useState` en el nivel superior de su componente para declarar una o más [variables de estado.](/learn/state-a-components-memory)
-```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"], [1, 5, "name"], [2, 5, "setName"], [3, 5, "'Taylor'"]]
+```js [[1, 4, "edad"], [2, 4, "setEdad"], [3, 4, "42"], [1, 5, "nombre"], [2, 5, "setNombre"], [3, 5, "'Taylor'"]]
import { useState } from 'react';
function MyComponent() {
- const [age, setAge] = useState(42);
- const [name, setName] = useState('Taylor');
+ const [edad, setEdad] = useState(42);
+ const [nombre, setNombre] = useState('Taylor');
// ...
```
- The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment)
+La convención es nombrar variables de estado como `[algo, setAlgo]` utilizando la [desestructuración de matrices.](https://javascript.info/destructuring-assignment)
-`useState` returns an array with exactly two items:
+`useState` devuelve un array con exactamente dos elementos:
-1. The current state of this state variable, initially set to the initial state you provided.
-2. The `set` function that lets you change it to any other value in response to interaction.
+1. El estado actual de esta variable de estado, establecida inicialmente en el estado inicial que proporcionó.
+2. La función `set` que le permite cambiarlo a cualquier otro valor en respuesta a la interacción.
-To update what’s on the screen, call the `set` function with some next state:
+Para actualizar lo que está en la pantalla, llame a la función set con algún estado:
-```js [[2, 2, "setName"]]
+```js [[2, 2, "setNombre"]]
function handleClick() {
- setName('Robin');
+ setNombre('Robin');
}
```
-React will store the next state, render your component again with the new values, and update the UI.
+React almacenará el siguiente estado, renderizará su componente nuevamente con los nuevos valores y actualizará la interfaz de usuario.
-Calling the `set` function [**does not** change the current state in the already executing code](#ive-updated-the-state-but-logging-gives-me-the-old-value):
+
+Llamando a la función `set` [**no cambia** el estado actual en el código que ya se está ejecutando ](#ive-updated-the-state-but-logging-gives-me-the-old-value):
```js {3}
function handleClick() {
- setName('Robin');
- console.log(name); // Still "Taylor"!
+ setNombre('Robin');
+ console.log(nombre); // Sigue siendo "Taylor"!
}
```
-
-It only affects what `useState` will return starting from the *next* render.
+Solo afecta lo que `useState` devolverá a partir del *siguiente* render.
-
+
-#### Counter (number) {/*counter-number*/}
+#### Contador (número) {/*counter-number*/}
-In this example, the `count` state variable holds a number. Clicking the button increments it.
+En este ejemplo, la variable `contador` contiene un número. Al hacer click en el botón lo incrementa
```js
import { useState } from 'react';
-export default function Counter() {
- const [count, setCount] = useState(0);
+export default function Contador() {
+ const [contador, setContador] = useState(0);
function handleClick() {
- setCount(count + 1);
+ setContador(contador + 1);
}
return (
);
}
@@ -93,9 +93,9 @@ export default function Counter() {
-#### Text field (string) {/*text-field-string*/}
-
-In this example, the `text` state variable holds a string. When you type, `handleChange` reads the latest input value from the browser input DOM element, and calls `setText` to update the state. This allows you to display the current `text` below.
+#### Campo de texto (cadena) {/*text-field-string*/}
+
+En este ejemplo, la variable de estado `texto` contiene una cadena. Cuando escribes,`handleChange` lee el ultimo valor ingresado al elemento input del DOM desde el navegador y llama `setTexto` para actualizar el estado. Esto le permite mostrar el actual `texto` abajo.
@@ -103,18 +103,18 @@ In this example, the `text` state variable holds a string. When you type, `handl
import { useState } from 'react';
export default function MyInput() {
- const [text, setText] = useState('hello');
+ const [texto, setTexto] = useState('hola');
function handleChange(e) {
- setText(e.target.value);
+ setTexto(e.target.value);
}
return (
<>
-
-