From b84734699d1156de0b74dde0c782efaaf50d1640 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Mon, 10 Oct 2022 19:33:47 -0400
Subject: [PATCH 1/4] add codebase to glossary

---
 TRANSLATION.md                                |   1 +
 .../content/learn/updating-arrays-in-state.md | 344 +++++++++---------
 2 files changed, 173 insertions(+), 172 deletions(-)

diff --git a/TRANSLATION.md b/TRANSLATION.md
index 731344e2f..0dda5b315 100644
--- a/TRANSLATION.md
+++ b/TRANSLATION.md
@@ -159,6 +159,7 @@ Aquí hay algunas sugerencias para la traducción de términos de uso común en
 | bundler | *bundler* |
 | callback | *callback* |
 | camelCase | *camelCase* |
+| codebase | base de código |
 | controlled component | componente controlado |
 | debugging | depuración |
 | event handler | manejador de eventos |
diff --git a/beta/src/content/learn/updating-arrays-in-state.md b/beta/src/content/learn/updating-arrays-in-state.md
index eae89facf..dca8254fa 100644
--- a/beta/src/content/learn/updating-arrays-in-state.md
+++ b/beta/src/content/learn/updating-arrays-in-state.md
@@ -1,52 +1,52 @@
 ---
-title: Updating Arrays in State
+title: Actualizando arreglos en el estado
 ---
 
 <Intro>
 
-Arrays are mutable in JavaScript, but you should treat them as immutable when you store them in state. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.
+Los arreglos son mutables en JavaScript, pero tú podrías tratarlos como inmutables cuando los almacenas en el estado. Justo como los objetos, cuando quieras actualizar un arreglo almacenado en el estado, necesitas crear uno nuevo ( o hacer una copia de uno existente), luego almacenarlo en el estado para hacer uso de este nuevo arreglo. 
 
 </Intro>
 
 <YouWillLearn>
 
-- How to add, remove, or change items in an array in React state
-- How to update an object inside of an array
-- How to make array copying less repetitive with Immer
+- Cómo añadir, remover, o cambiar items en un arreglo en el estado de React
+- Cómo actualizar un objeto dentro de un arreglo
+- Cómo copiar un arreglo de forma menos repetitiva con Immer
 
 </YouWillLearn>
 
-## Updating arrays without mutation {/*updating-arrays-without-mutation*/}
+## Actualizando arreglos sin mutación {/*updating-arrays-without-mutation*/}
 
-In JavaScript, arrays are just another kind of object. [Like with objects](/learn/updating-objects-in-state), **you should treat arrays in React state as read-only.** This means that you shouldn't reassign items inside an array like `arr[0] = 'bird'`, and you also shouldn't use methods that mutate the array, such as `push()` and `pop()`.
+En JavaScript, los arreglos son sólo otro tipo de objeto. [Como con los objetos](/learn/updating-objects-in-state), **deberías tratar los arreglos en estado React como solo lectura.** Esto significa que no deberías reasignar elementos dentro de un arreglo como `arr[0] = 'pájaro'`, y tampoco deberías usar métodos que puedan mutar el arreglo, como `push()` y `pop()`.
 
-Instead, every time you want to update an array, you'll want to pass a *new* array to your state setting function. To do that, you can create a new array from the original array in your state by calling its non-mutating methods like `filter()` and `map()`. Then you can set your state to the resulting new array.
+En su lugar, cada vez que quieras actualizar un arreglo, querrás pasar un, *nuevo* arreglo a su función de configuración de estado.Para hacer eso, puedes crear un nuevo arreglo a partir de el arreglo original en su estado llamando a sus métodos no mutantes como `filter()` por `map()`. Luego puede establecer su estado a partir de un nuevo arreglo.
 
-Here is a reference table of common array operations. When dealing with arrays inside React state, you will need to avoid the methods in the left column, and instead prefer the methods in the right column:
+Aquí hay una tabla de referencia con las operaciones más comunes con arreglos. Cuando se trata de arreglos dentro de el estado de React, necesitarás evitar los métodos de la columna izquierda, y en su lugar es preferible usar los métodos de la columna derecha.
 
-|           | avoid (mutates the array)           | prefer (returns a new array)                                        |
-| --------- | ----------------------------------- | ------------------------------------------------------------------- |
-| adding    | `push`, `unshift`                   | `concat`, `[...arr]` spread syntax ([example](#adding-to-an-array)) |
-| removing  | `pop`, `shift`, `splice`            | `filter`, `slice` ([example](#removing-from-an-array))              |
-| replacing | `splice`, `arr[i] = ...` assignment | `map` ([example](#replacing-items-in-an-array))                     |
-| sorting   | `reverse`, `sort`                   | copy the array first ([example](#making-other-changes-to-an-array)) |
+|              | evita (muta el arreglo)                  | preferido (retorna un nuevo arreglo)                                         |
+|--------------|------------------------------------------|------------------------------------------------------------------------------|
+| añadiendo    | `push`, `unshift`                        | `concat`, `[...arr]` operador de propagación ([ejemplo](#adding-to-an-array))|
+| removiendo   | `pop`, `shift`, `splice`                 | `filter`, `slice` ([ejemplo](#removing-from-an-array))                       |
+| reemplazando | `splice`, `arr[i] = ...` asigna          | `map` ([ejemplo](#replacing-items-in-an-array))                              |
+| ordenando    | `reverse`, `sort`                        | copia el arreglo primero ([ejemplo](#making-other-changes-to-an-array))      |
 
-Alternatively, you can [use Immer](#write-concise-update-logic-with-immer) which lets you use methods from both columns.
+Alternativamente, tú puedes [usar Immer](#write-concise-update-logic-with-immer) el cual te permite usar métodos de ambas columnas.
 
 <Pitfall>
 
-Unfortunately, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) are named similarly but are very different:
+Desafortunadamente, [`slice`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`splice`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) están nombrados de forma similar pero estos son my diferentes:
 
-* `slice` lets you copy an array or a part of it.
-* `splice` **mutates** the array (to insert or delete items).
+* `slice` te permite copiar un arreglo o una parte del mismo.
+* `splice` **muta** el arreglo (para insertar o eliminar elementos).
 
-In React, you will be using `slice` (no `p`!) a lot more often because you don't want to mutate objects or arrays in state. [Updating Objects](/learn/updating-objects-in-state) explains what mutation is and why it's not recommended for state.
+En React, estarás usando `slice` (no `p`!) mucho más seguido porque no quieres mutar objetos o arreglos en el estado. [Actualizando objetos](/learn/updating-objects-in-state) explica qué es mutación y por qué esto no es recomendado para el estado.
 
 </Pitfall>
 
-### Adding to an array {/*adding-to-an-array*/}
+### Añadiendo un arreglo {/*adding-to-an-array*/}
 
-`push()` will mutate an array, which you don't want:
+`push()` muta un arreglo, lo cual no queremos:
 
 <Sandpack>
 
@@ -61,7 +61,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Escultores inspiradores:</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -72,7 +72,7 @@ export default function List() {
           id: nextId++,
           name: name,
         });
-      }}>Add</button>
+      }}>Añadir</button>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>{artist.name}</li>
@@ -89,18 +89,18 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Instead, create a *new* array which contains the existing items *and* a new item at the end. There are multiple ways to do this, but the easiest one is to use the `...` [array spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals) syntax:
+En su lugar, crea un *nuevo* arreglo el cual contenga los elementos existentes *y* un nuevo elemento al final. Hay multiples formas para hacer esto, pero la más fácil es usar la sintaxis `...` [operador de propagación en arreglos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):
 
 ```js
-setArtists( // Replace the state
-  [ // with a new array
-    ...artists, // that contains all the old items
-    { id: nextId++, name: name } // and one new item at the end
+setArtists( // Remplaza el estado
+  [ // con el nuevo arreglo
+    ...artists, // el cual contiene todos los elementos antiguos
+    { id: nextId++, name: name } // y un nuevo elemento al final
   ]
 );
 ```
 
-Now it works correctly:
+Ahora funciona correctamente:
 
 <Sandpack>
 
@@ -115,7 +115,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Escultores inspiradores:</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -126,7 +126,7 @@ export default function List() {
           ...artists,
           { id: nextId++, name: name }
         ]);
-      }}>Add</button>
+      }}>Añadir</button>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>{artist.name}</li>
@@ -143,20 +143,20 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-The array spread syntax also lets you prepend an item by placing it *before* the original `...artists`:
+El operador de propagación también te permite anteponer un elemento colocandolo *antes* de el original `...artists`:
 
 ```js
 setArtists([
   { id: nextId++, name: name },
-  ...artists // Put old items at the end
+  ...artists // Coloca los elementos antiguos al final
 ]);
 ```
 
-In this way, spread can do the job of both `push()` by adding to the end of an array and `unshift()` by adding to the beginning of an array. Try it in the sandbox above!
+De esta forma, el operador de propagación puede hacer el trabajo tanto de `push()` añadiendo en el final del arreglo como de `unshift()` agregando al comienzo de el arreglo. ¡Pruebalo en el editor de arriba!
 
-### Removing from an array {/*removing-from-an-array*/}
+### Eliminando elementos de un arreglo {/*removing-from-an-array*/}
 
-The easiest way to remove an item from an array is to *filter it out*. In other words, you will produce a new array that will not contain that item. To do this, use the `filter` method, for example:
+La forma más fácil de remover un elemento de un arreglo es *filtrarlo*. En otras palabras, producirás un nuevo arreglo el cual no contendrá ese elemento. Para hacer esto, usa el método `filter`, por ejemplo:
 
 <Sandpack>
 
@@ -176,7 +176,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Escultores inspiradores:</h1>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>
@@ -188,7 +188,7 @@ export default function List() {
                 )
               );
             }}>
-              Delete
+              Eliminar
             </button>
           </li>
         ))}
@@ -200,7 +200,7 @@ export default function List() {
 
 </Sandpack>
 
-Click the "Delete" button a few times, and look at its click handler.
+Haz click en el botón de "Eliminar" varias veces, y mira su controlador de clics.
 
 ```js
 setArtists(
@@ -208,13 +208,13 @@ setArtists(
 );
 ```
 
-Here, `artists.filter(a => a.id !== artist.id)` means "create an array that consists of those `artists` whose IDs are different from `artist.id`". In other words, each artist's "Delete" button will filter _that_ artist out of the array, and then request a re-render with the resulting array. Note that `filter` does not modify the original array.
+Aquí, `artists.filter(a => a.id !== artist.id)` significa "crea un nuevo arreglo el cual consista de aquellos `artists` cuyos IDs son diferentes de `artist.id`". En otras palabras, el botón "Eliminar" de cada artista filtrará a _ese_ artista de el arreglo y luego solicitará una nueva representación con el arreglo resultante. Ten en cuenta que `filter` no modifica el arreglo original.
 
-### Transforming an array {/*transforming-an-array*/}
+### Transformando un arreglo {/*transforming-an-array*/}
 
-If you want to change some or all items of the array, you can use `map()` to create a **new** array. The function you will pass to `map` can decide what to do with each item, based on its data or its index (or both).
+Si deseas cambiar algunos o todos los elementos de el arreglo, puedes usar `map()` para crear un **nuevo** arreglo. La función que pasará a `map` puede decidir qué hacer con cada elemento, en función de sus datos o su índice (o ambos).
 
-In this example, an array holds coordinates of two circles and a square. When you press the button, it moves only the circles down by 50 pixels. It does this by producing a new array of data using `map()`:
+En este ejemplo, un arreglo contiene las coordenadas de dos círculos y un cuadrado. Cuando presiona el botón, mueve solo los círculos 50 píxeles hacia abajo. Lo hace produciendo un nuevo arreglo de datos usando `map()`:
 
 <Sandpack>
 
@@ -235,24 +235,24 @@ export default function ShapeEditor() {
   function handleClick() {
     const nextShapes = shapes.map(shape => {
       if (shape.type === 'square') {
-        // No change
+        // No cambia
         return shape;
       } else {
-        // Return a new circle 50px below
+        // Devuelve un nuevo círculo 50px abajo
         return {
           ...shape,
           y: shape.y + 50,
         };
       }
     });
-    // Re-render with the new array
+    // Vuelve a renderizar con el nuevo arreglo
     setShapes(nextShapes);
   }
 
   return (
     <>
       <button onClick={handleClick}>
-        Move circles down!
+        ¡Mueve los círculos hacia abajo!
       </button>
       {shapes.map(shape => (
         <div
@@ -280,11 +280,11 @@ body { height: 300px; }
 
 </Sandpack>
 
-### Replacing items in an array {/*replacing-items-in-an-array*/}
+### Reemplazo de elementos en un arreglo {/*replacing-items-in-an-array*/}
 
-It is particularly common to want to replace one or more items in an array. Assignments like `arr[0] = 'bird'` are mutating the original array, so instead you'll want to use `map` for this as well.
+Es particularmente común querer reemplazar uno o más elementos en un arreglo. Las asignaciones como `arr[0] = 'pájaro'` están mutando el arreglo original, por lo que también querrás usar `map` para esto.
 
-To replace an item, create a new array with `map`. Inside your `map` call, you will receive the item index as the second argument. Use it to decide whether to return the original item (the first argument) or something else:
+Para reemplazar un elemento, crea una un nuevo arreglo con `map`. Dentro de su llamada `map`, recibirá el índice del elemento como segundo argumento. Úsalo para decidir si devolver el elemento original (el primer argumento) o algo más:
 
 <Sandpack>
 
@@ -303,10 +303,10 @@ export default function CounterList() {
   function handleIncrementClick(index) {
     const nextCounters = counters.map((c, i) => {
       if (i === index) {
-        // Increment the clicked counter
+        // Incrementa el contador de clics
         return c + 1;
       } else {
-        // The rest haven't changed
+        // El resto no ha cambiado
         return c;
       }
     });
@@ -334,11 +334,11 @@ button { margin: 5px; }
 
 </Sandpack>
 
-### Inserting into an array {/*inserting-into-an-array*/}
+### Insertando en un arreglo {/*inserting-into-an-array*/}
 
-Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread syntax together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
+A veces, es posible que desees insertar un elemento en una posición particular que no esté ni al principio ni al final. Para hacer esto, puedes usar la sintaxis de propagación para arreglos `...` junto con el método `slice()`. El método `slice()` te permite cortar una "rebanada" de el arreglo. Para insertar un elemento, crearás un arreglo que extienda el segmento _antes_ del punto de inserción, luego el nuevo elemento y luego el resto de el arreglo original.
 
-In this example, the Insert button always inserts at the index `1`:
+En este ejemplo, el botón "Insertar" siempre inserta en el índice `1`:
 
 <Sandpack>
 
@@ -359,13 +359,13 @@ export default function List() {
   );
 
   function handleClick() {
-    const insertAt = 1; // Could be any index
+    const insertAt = 1; // Podría ser cualquier índice
     const nextArtists = [
-      // Items before the insertion point:
+      // Elementos antes del punto de inserción:
       ...artists.slice(0, insertAt),
       // New item:
       { id: nextId++, name: name },
-      // Items after the insertion point:
+      // Elementos después del punto de inserción:
       ...artists.slice(insertAt)
     ];
     setArtists(nextArtists);
@@ -374,13 +374,13 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Escultores inspiradores:</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
       />
       <button onClick={handleClick}>
-        Insert
+        Insertar
       </button>
       <ul>
         {artists.map(artist => (
@@ -398,13 +398,13 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-### Making other changes to an array {/*making-other-changes-to-an-array*/}
+### Hacer otros cambios en un arreglo {/*making-other-changes-to-an-array*/}
 
-There are some things you can't do with the spread syntax and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
+Hay algunas cosas que no puedes hacer con la sintaxis extendida y los métodos que no mutan como `map()` y `filter()` solos. Por ejemplo, es posible que desees invertir u ordenar un arreglo. Los métodos JavaScript `reverse()` y `sort()` están mutando el arreglo original, por lo que no puede usarlos directamente.
 
-**However, you can copy the array first, and then make changes to it.**
+**Sin embargo, puedes copiar el arreglo primero y luego realizar cambios en él.**
 
-For example:
+Por ejemplo:
 
 <Sandpack>
 
@@ -430,7 +430,7 @@ export default function List() {
   return (
     <>
       <button onClick={handleClick}>
-        Reverse
+        Inverso
       </button>
       <ul>
         {list.map(artwork => (
@@ -444,25 +444,25 @@ export default function List() {
 
 </Sandpack>
 
-Here, you use the `[...list]` spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
+Aquí, usa la sintaxis de propagación `[...list]` para crear primero una copia de el arreglo original. Ahora que tienes una copia, puedes usar métodos de mutación como `nextList.reverse()` o `nextList.sort()`, o incluso asignar elementos individuales con `nextList[0] = "algo"`.
 
-However, **even if you copy an array, you can't mutate existing items _inside_ of it directly.** This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.
+Sin embargo, **incluso si copias un arreglo, no puede mutar los elementos existentes _dentro_ de éste directamente.** Esto se debe a que la copia es superficial: el nuevo arreglo contendrá los mismos elementos que la original. Entonces, si modificas un objeto dentro de el arreglo copiado, estás mutando el estado existente. Por ejemplo, un código como este es un problema.
 
 ```js
 const nextList = [...list];
-nextList[0].seen = true; // Problem: mutates list[0]
+nextList[0].seen = true; // Problema: muta list[0]
 setList(nextList);
 ```
 
-Although `nextList` and `list` are two different arrays, **`nextList[0]` and `list[0]` point to the same object.** So by changing `nextList[0].seen`, you are also changing `list[0].seen`. This is a state mutation, which you should avoid! You can solve this issue in a similar way to [updating nested JavaScript objects](/learn/updating-objects-in-state#updating-a-nested-object)--by copying individual items you want to change instead of mutating them. Here's how.
+Aunque `nextList` y `list` son dos arreglos diferentes, **`nextList[0]` y `list[0]` apuntan al mismo objeto.** Entonces, al cambiar `nextList[0].seen`, está también cambiando `list[0].seen`. ¡Esta es una mutación de estado que debes evitar! Puedes resolver este problema de forma similar a [actualizar objetos JavaScript anidados](/learn/updating-objects-in-state#updating-a-nested-object): copiando elementos individuales que deseas cambiar en lugar de mutarlos. Así es cómo.
 
-## Updating objects inside arrays {/*updating-objects-inside-arrays*/}
+## Actualizando objetos dentro de arreglos {/*updating-objects-inside-arrays*/}
 
-Objects are not _really_ located "inside" arrays. They might appear to be "inside" in code, but each object in an array is a separate value, to which the array "points". This is why you need to be careful when changing nested fields like `list[0]`. Another person's artwork list may point to the same element of the array!
+Los objetos no están _realmente_ ubicados "dentro" de los arreglos. Puede parecer que están "dentro" del código, pero cada objeto en un arreglo es un valor separado, al que "apunta" el arreglo. Es por eso que debe tener cuidado al cambiar campos anidados como `list[0]`. ¡La lista de obras de arte de otra persona puede apuntar al mismo elemento de el arreglo!
 
-**When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level.** Let's see how this works.
+**Al actualizar el estado anidado, debe crear copias desde el punto en el que desea actualizar y hasta el nivel superior.** Veamos cómo funciona esto.
 
-In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:
+En este ejemplo, dos listas separadas de ilustraciones tienen el mismo estado inicial. Se supone que deben estar aislados, pero debido a una mutación, su estado se comparte accidentalmente y marcar una casilla en una lista afecta a la otra lista:
 
 <Sandpack>
 
@@ -502,12 +502,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>Bucket de arte</h1>
+      <h2>Mi lista de arte para ver:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>Tu lista de arte para ver:</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -542,34 +542,34 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-The problem is in code like this:
+El problema está en un código como este:
 
 ```js
 const myNextList = [...myList];
 const artwork = myNextList.find(a => a.id === artworkId);
-artwork.seen = nextSeen; // Problem: mutates an existing item
+artwork.seen = nextSeen; // Problema: muta un elemento existente
 setMyList(myNextList);
 ```
 
-Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourArtworks`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
+Aunque el arreglo `myNextList` en sí mismo es nuevo, los *elementos iguales* son los mismos que en el arreglo `myList` original. Entonces, cambiar `artwork.seen` cambia el elemento de la obra de arte *original*. Ese elemento de la obra de arte también está en `yourArtworks`, lo que causa el error. Errores como este pueden ser difíciles de pensar, pero afortunadamente desaparecen si evitas el estado de mutación.
 
-**You can use `map` to substitute an old item with its updated version without mutation.**
+**Puedes usar `map` para sustituir un elemento antiguo con su versión actualizada sin mutación.**
 
 ```js
 setMyList(myList.map(artwork => {
   if (artwork.id === artworkId) {
-    // Create a *new* object with changes
+    // Crea un *nuevo* objeto con cambios
     return { ...artwork, seen: nextSeen };
   } else {
-    // No changes
+     // No cambia
     return artwork;
   }
 });
 ```
 
-Here, `...` is the object spread syntax used to [create a copy of an object.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
+Aquí, `...` es la sintaxis de propagación de objetos utilizada para [crear una copia de un objeto.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
 
-With this approach, none of the existing state items are being mutated, and the bug is fixed:
+Con este enfoque, ninguno de los elementos del estado existentes se modifica y el error se soluciona:
 
 <Sandpack>
 
@@ -592,10 +592,10 @@ export default function BucketList() {
   function handleToggleMyList(artworkId, nextSeen) {
     setMyList(myList.map(artwork => {
       if (artwork.id === artworkId) {
-        // Create a *new* object with changes
+        // Crea un *nuevo* objeto con cambios
         return { ...artwork, seen: nextSeen };
       } else {
-        // No changes
+        // No cambia
         return artwork;
       }
     }));
@@ -604,10 +604,10 @@ export default function BucketList() {
   function handleToggleYourList(artworkId, nextSeen) {
     setYourList(yourList.map(artwork => {
       if (artwork.id === artworkId) {
-        // Create a *new* object with changes
+        // Crea un *nuevo* objeto con cambios
         return { ...artwork, seen: nextSeen };
       } else {
-        // No changes
+        // No cambia
         return artwork;
       }
     }));
@@ -615,12 +615,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>Bucket de arte</h1>
+      <h2>Mi lista de arte para ver:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>Tu lista de arte para ver:</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -655,16 +655,16 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-In general, **you should only mutate objects that you have just created.** If you were inserting a *new* artwork, you could mutate it, but if you're dealing with something that's already in state, you need to make a copy.
+En general, **solo debes mutar objetos que acaba de crear.** Si estuvieras insertando una *nueva* obra de arte, podría mutarla, pero si se trata de algo que ya está en estado, debes hacer una copia.
 
-### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+### Escribe una lógica de actualización concisa con Immer {/*write-concise-update-logic-with-immer*/}
 
-Updating nested arrays without mutation can get a little bit repetitive. [Just as with objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
+Al actualizar arreglos anidados sin mutación puede volverse un poco repetitivo. [Al igual que con los objetos](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
-- Generally, you shouldn't need to update state more than a couple of levels deep. If your state objects are very deep, you might want to [restructure them differently](/learn/choosing-the-state-structure#avoid-deeply-nested-state) so that they are flat.
-- If you don't want to change your state structure, you might prefer to use [Immer](https://github.com/immerjs/use-immer), which lets you write using the convenient but mutating syntax and takes care of producing the copies for you.
+- En general, no deberías de necesitar actualizar el estado más de un par de niveles de profundidad. Si tus objetos de estado son muy profundos, es posible que desees [reestructurarlos de manera diferente](/learn/choosing-the-state-structure#avoid-deeply-nested-state) para que sean planos.
+- Si no deseas cambiar su estructura de estado, puedes preferir usar [Immer](https://github.com/immerjs/use-immer), que te permite escribir usando la sintaxis conveniente pero cambiante y se encarga de producir las copias para usted.
 
-Here is the Art Bucket List example rewritten with Immer:
+Aquí está el ejemplo de un Bucket de arte reescrito con Immer:
 
 <Sandpack>
 
@@ -707,12 +707,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>Bucket de arte</h1>
+      <h2>Mi lista de arte para ver:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>Tu lista de arte para ver:</h2>
       <ItemList
         artworks={yourArtworks}
         onToggle={handleToggleYourList} />
@@ -765,7 +765,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-Note how with Immer, **mutation like `artwork.seen = nextSeen` is now okay:**
+Ten en cuenta cómo con Immer, **la mutación como `artwork.seen = nextSeen` ahora está bien:**
 
 ```js
 updateMyTodos(draft => {
@@ -774,17 +774,17 @@ updateMyTodos(draft => {
 });
 ```
 
-This is because you're not mutating the _original_ state, but you're mutating a special `draft` object provided by Immer. Similarly, you can apply mutating methods like `push()` and `pop()` to the content of the `draft`.
+Esto se debe a que no está mutando el estado _original_, sino que está mutando un objeto `draft` especial proporcionado por Immer. Del mismo modo, puedes aplicar métodos de mutación como `push()` y `pop()` al contenido del `draft`.
 
-Behind the scenes, Immer always constructs the next state from scratch according to the changes that you've done to the `draft`. This keeps your event handlers very concise without ever mutating state.
+Detrás de escena, Immer siempre construye el siguiente estado desde cero de acuerdo con los cambios que ha realizado en el `draft`. Esto mantiene sus controladores de eventos muy concisos sin cambiar nunca el estado.
 
 <Recap>
 
-- You can put arrays into state, but you can't change them.
-- Instead of mutating an array, create a *new* version of it, and update the state to it.
-- You can use the `[...arr, newItem]` array spread syntax to create arrays with new items.
-- You can use `filter()` and `map()` to create new arrays with filtered or transformed items.
-- You can use Immer to keep your code concise.
+- Puedes poner arreglos en el estado, pero no puedes cambiarlos.
+- En lugar de mutar un arreglo, crea una *nueva* versión y actualiza el estado.
+- Puedes usar la sintaxis de propagación `[...arr, newItem]` para crear arreglos con nuevos elementos.
+- Puedes usar `filter()` y `map()` para crear nuevos arreglos con elementos filtrados o transformados.
+- Puedes usar Immer para mantener su código conciso.
 
 </Recap>
 
@@ -792,9 +792,9 @@ Behind the scenes, Immer always constructs the next state from scratch according
 
 <Challenges>
 
-#### Update an item in the shopping cart {/*update-an-item-in-the-shopping-cart*/}
+#### Actualizar un artículo en el carrito de compras {/*update-an-item-in-the-shopping-cart*/}
 
-Fill in the `handleIncreaseClick` logic so that pressing "+" increases the corresponding number:
+Completa la lógica `handleIncreaseClick` para que al presionar "+" aumente el número correspondiente:
 
 <Sandpack>
 
@@ -807,11 +807,11 @@ const initialProducts = [{
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Queso',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Espaguetis',
   count: 2,
 }];
 
@@ -852,7 +852,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can use the `map` function to create a new array, and then use the `...` object spread syntax to create a copy of the changed object for the new array:
+Puedes usar la función `map` para crear un nuevo arreglo, y luego usar la sintaxis del operador de propagación de objetos `...` para crear una copia del objeto modificado para el nuevo arreglo:
 
 <Sandpack>
 
@@ -865,11 +865,11 @@ const initialProducts = [{
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Queso',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Espaguetis',
   count: 2,
 }];
 
@@ -919,9 +919,9 @@ button { margin: 5px; }
 
 </Solution>
 
-#### Remove an item from the shopping cart {/*remove-an-item-from-the-shopping-cart*/}
+#### Eliminar un artículo del carrito de compras {/*remove-an-item-from-the-shopping-cart*/}
 
-This shopping cart has a working "+" button, but the "–" button doesn't do anything. You need to add an event handler to it so that pressing it decreases the `count` of the corresponding product. If you press "–" when the count is 1, the product should automatically get removed from the cart. Make sure it never shows 0.
+Este carrito de compras tiene un botón "+" que funciona, pero el botón "–" no hace nada. Debes agregarle un controlador de eventos para que al presionarlo disminuya el `count` del producto correspondiente. Si presionas "–" cuando el conteo es 1, el producto debería eliminarse automáticamente del carrito. Asegúrate de que nunca muestre 0.
 
 <Sandpack>
 
@@ -934,11 +934,11 @@ const initialProducts = [{
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Queso',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Espaguetis',
   count: 2,
 }];
 
@@ -991,7 +991,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can first use `map` to produce a new array, and then `filter` to remove products with a `count` set to `0`:
+Primero puedes usar `map` para producir un nuevo arreglo, y luego `filter` para eliminar productos con un `count` establecido en `0`:
 
 <Sandpack>
 
@@ -1004,11 +1004,11 @@ const initialProducts = [{
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Queso',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Espaguetis',
   count: 2,
 }];
 
@@ -1080,9 +1080,9 @@ button { margin: 5px; }
 
 </Solution>
 
-#### Fix the mutations using non-mutative methods {/*fix-the-mutations-using-non-mutative-methods*/}
+#### Repara las mutaciones usando métodos no mutativos {/*fix-the-mutations-using-non-mutative-methods*/}
 
-In this example, all of the event handlers in `App.js` use mutation. As a result, editing and deleting todos doesn't work. Rewrite `handleAddTodo`, `handleChangeTodo`, and `handleDeleteTodo` to use the non-mutative methods:
+En este ejemplo, todos los controladores de eventos en `App.js` usan mutación. Como resultado, la edición y eliminación de todos no funciona. Vuelva a escribir `handleAddTodo`, `handleChangeTodo` y `handleDeleteTodo` para usar los métodos no mutativos:
 
 <Sandpack>
 
@@ -1093,9 +1093,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Comprar leche', done: true },
+  { id: 1, title: 'Comer tacos', done: false },
+  { id: 2, title: 'Preparar té', done: false },
 ];
 
 export default function TaskApp() {
@@ -1149,14 +1149,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Agregar tarea"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Agregar</button>
     </>
   )
 }
@@ -1200,7 +1200,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Guardar
         </button>
       </>
     );
@@ -1209,7 +1209,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Editar
         </button>
       </>
     );
@@ -1228,7 +1228,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Eliminar
       </button>
     </label>
   );
@@ -1245,7 +1245,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-In `handleAddTodo`, you can use the array spread syntax. In `handleChangeTodo`, you can create a new array with `map`. In `handleDeleteTodo`, you can create a new array with `filter`. Now the list works correctly:
+En `handleAddTodo`, puedes usar el operador de propagación de arreglos. En `handleChangeTodo`, puedes crear un nuevo arreglo con `map`. En `handleDeleteTodo`, puedes crear un nuevo arreglo con `filter`. Ahora la lista funciona correctamente:
 
 <Sandpack>
 
@@ -1256,9 +1256,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Comprar leche', done: true },
+  { id: 1, title: 'Comer tacos', done: false },
+  { id: 2, title: 'Preparar té', done: false },
 ];
 
 export default function TaskApp() {
@@ -1316,14 +1316,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Añadir tarea"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Agregar</button>
     </>
   )
 }
@@ -1367,7 +1367,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Guardar
         </button>
       </>
     );
@@ -1376,7 +1376,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Editar
         </button>
       </>
     );
@@ -1395,7 +1395,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Eliminar
       </button>
     </label>
   );
@@ -1413,9 +1413,9 @@ ul, li { margin: 0; padding: 0; }
 </Solution>
 
 
-#### Fix the mutations using Immer {/*fix-the-mutations-using-immer*/}
+#### Arregla las mutaciones usando Immer {/*fix-the-mutations-using-immer*/}
 
-This is the same example as in the previous challenge. This time, fix the mutations by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `todos` state variable to use it.
+Este es el mismo ejemplo que en el desafío anterior. Esta vez, arregla las mutaciones usando Immer. Para tú comodidad, `useImmer` ya está importado, por lo que debes cambiar la variable de estado `todos` para usarlo.
 
 <Sandpack>
 
@@ -1427,9 +1427,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Comprar leche', done: true },
+  { id: 1, title: 'Comer tacos', done: false },
+  { id: 2, title: 'Preparar té', done: false },
 ];
 
 export default function TaskApp() {
@@ -1483,14 +1483,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Agregar tarea"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Añadir</button>
     </>
   )
 }
@@ -1534,7 +1534,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Guardadr
         </button>
       </>
     );
@@ -1543,7 +1543,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Editar
         </button>
       </>
     );
@@ -1562,7 +1562,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Eliminar
       </button>
     </label>
   );
@@ -1597,7 +1597,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-With Immer, you can write code in the mutative fashion, as long as you're only mutating parts of the `draft` that Immer gives you. Here, all mutations are performed on the `draft` so the code works:
+Con Immer, puedes escribir código de forma mutativa, siempre y cuando solo esté mutando partes del `draft` que Immer le proporciona. Aquí, todas las mutaciones se realizan en el `draft` para que el código funcione:
 
 <Sandpack>
 
@@ -1609,9 +1609,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Comprar leche', done: true },
+  { id: 1, title: 'Comer tacos', done: false },
+  { id: 2, title: 'Preparar té', done: false },
 ];
 
 export default function TaskApp() {
@@ -1671,14 +1671,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Añadir tarea"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Agregar</button>
     </>
   )
 }
@@ -1722,7 +1722,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Guardar
         </button>
       </>
     );
@@ -1731,7 +1731,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Editar
         </button>
       </>
     );
@@ -1750,7 +1750,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Eliminar
       </button>
     </label>
   );
@@ -1783,9 +1783,9 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-You can also mix and match the mutative and non-mutative approaches with Immer.
+También puede mezclar y combinar los enfoques mutativos y no mutativos con Immer.
 
-For example, in this version `handleAddTodo` is implemented by mutating the Immer `draft`, while `handleChangeTodo` and `handleDeleteTodo` use the non-mutative `map` and `filter` methods:
+Por ejemplo, en esta versión `handleAddTodo` es implementado usando Immer `draft`, mientras `handleChangeTodo` y `handleDeleteTodo` usa los métodos no mutativos `map` y `filter`:
 
 <Sandpack>
 
@@ -1797,9 +1797,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Comprar leche', done: true },
+  { id: 1, title: 'Comer tacos', done: false },
+  { id: 2, title: 'Preparar té', done: false },
 ];
 
 export default function TaskApp() {
@@ -1856,14 +1856,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Nueva tarea"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Añadir</button>
     </>
   )
 }
@@ -1907,7 +1907,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Guardar
         </button>
       </>
     );
@@ -1916,7 +1916,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Editar
         </button>
       </>
     );
@@ -1935,7 +1935,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Eliminar
       </button>
     </label>
   );
@@ -1968,7 +1968,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-With Immer, you can pick the style that feels the most natural for each separate case.
+Con Immer, puedes elegir el estilo el cual se sienta más natural por cada caso separado.
 
 </Solution>
 

From 94d46523ffff61fc3ad0e6658166a38ae1665b35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Sat, 22 Oct 2022 12:35:28 -0400
Subject: [PATCH 2/4] apply style guide

---
 .../content/learn/updating-arrays-in-state.md | 156 +++++++++---------
 1 file changed, 78 insertions(+), 78 deletions(-)

diff --git a/beta/src/content/learn/updating-arrays-in-state.md b/beta/src/content/learn/updating-arrays-in-state.md
index dca8254fa..b9154ae8e 100644
--- a/beta/src/content/learn/updating-arrays-in-state.md
+++ b/beta/src/content/learn/updating-arrays-in-state.md
@@ -1,52 +1,52 @@
 ---
-title: Actualizando arreglos en el estado
+title: Actualizar _arrays_ en el estado
 ---
 
 <Intro>
 
-Los arreglos son mutables en JavaScript, pero tú podrías tratarlos como inmutables cuando los almacenas en el estado. Justo como los objetos, cuando quieras actualizar un arreglo almacenado en el estado, necesitas crear uno nuevo ( o hacer una copia de uno existente), luego almacenarlo en el estado para hacer uso de este nuevo arreglo. 
+Los _arrays_ son mutables en JavaScript, pero deberían tratarse como inmutables cuando los almacenas en el estado. Al igual que los objetos, cuando quieras actualizar un _array_ almacenado en el estado, necesitas crear uno nuevo (o hacer una copia de uno existente) y luego asignar el estado para que utilice este nuevo _array_. 
 
 </Intro>
 
 <YouWillLearn>
 
-- Cómo añadir, remover, o cambiar items en un arreglo en el estado de React
-- Cómo actualizar un objeto dentro de un arreglo
-- Cómo copiar un arreglo de forma menos repetitiva con Immer
+- Cómo añadir, eliminar o cambiar elementos en un _array_ en el estado de React
+- Cómo actualizar un objeto dentro de un _array_
+- Cómo copiar un _array_ de forma menos repetitiva con Immer
 
 </YouWillLearn>
 
-## Actualizando arreglos sin mutación {/*updating-arrays-without-mutation*/}
+## Actualizar _arrays_ sin mutación {/*updating-arrays-without-mutation*/}
 
-En JavaScript, los arreglos son sólo otro tipo de objeto. [Como con los objetos](/learn/updating-objects-in-state), **deberías tratar los arreglos en estado React como solo lectura.** Esto significa que no deberías reasignar elementos dentro de un arreglo como `arr[0] = 'pájaro'`, y tampoco deberías usar métodos que puedan mutar el arreglo, como `push()` y `pop()`.
+En JavaScript, los _arrays_ son solo otro tipo de objeto. [Como con los objetos](/learn/updating-objects-in-state), **deberías tratar los _arrays_ en el estado de React como si fueran de solo lectura.** Esto significa que no deberías reasignar elementos dentro de un _array_ como `arr[0] = 'pájaro'`, y tampoco deberías usar métodos que puedan mutar el _array_, como `push()` y `pop()`.
 
-En su lugar, cada vez que quieras actualizar un arreglo, querrás pasar un, *nuevo* arreglo a su función de configuración de estado.Para hacer eso, puedes crear un nuevo arreglo a partir de el arreglo original en su estado llamando a sus métodos no mutantes como `filter()` por `map()`. Luego puede establecer su estado a partir de un nuevo arreglo.
+En su lugar, cada vez que quieras actualizar un _array_, querrás pasar un, *nuevo* _array_ a la función de asignación de estado. Para hacerlo, puedes crear un nuevo _array_ a partir del _array_ original en el estado si llamas a sus métodos que no lo muten como `filter()` y `map()`. Luego puedes asignar el estado a partir del nuevo _array_ resultante.
 
-Aquí hay una tabla de referencia con las operaciones más comunes con arreglos. Cuando se trata de arreglos dentro de el estado de React, necesitarás evitar los métodos de la columna izquierda, y en su lugar es preferible usar los métodos de la columna derecha.
+Aquí hay una tabla de referencia con las operaciones más comunes con _arrays_. Cuando se trata de _arrays_ dentro del estado de React, necesitarás evitar los métodos de la columna izquierda, y en su lugar es preferible usar los métodos de la columna derecha.
 
-|              | evita (muta el arreglo)                  | preferido (retorna un nuevo arreglo)                                         |
+|              | evita (muta el _array_)                  | preferido (retorna un nuevo _array_)                                         |
 |--------------|------------------------------------------|------------------------------------------------------------------------------|
-| añadiendo    | `push`, `unshift`                        | `concat`, `[...arr]` operador de propagación ([ejemplo](#adding-to-an-array))|
-| removiendo   | `pop`, `shift`, `splice`                 | `filter`, `slice` ([ejemplo](#removing-from-an-array))                       |
-| reemplazando | `splice`, `arr[i] = ...` asigna          | `map` ([ejemplo](#replacing-items-in-an-array))                              |
-| ordenando    | `reverse`, `sort`                        | copia el arreglo primero ([ejemplo](#making-other-changes-to-an-array))      |
+| insertar    | `push`, `unshift`                        | `concat`, `[...arr]` operador de propagación ([ejemplo](#adding-to-an-array))|
+| eliminar   | `pop`, `shift`, `splice`                 | `filter`, `slice` ([ejemplo](#removing-from-an-array))                       |
+| reemplazar | `splice`, `arr[i] = ...` asigna          | `map` ([ejemplo](#replacing-items-in-an-array))                              |
+| ordenar    | `reverse`, `sort`                        | copia el _array_ primero ([ejemplo](#making-other-changes-to-an-array))      |
 
-Alternativamente, tú puedes [usar Immer](#write-concise-update-logic-with-immer) el cual te permite usar métodos de ambas columnas.
+Como alternativa, puedes [usar Immer](#write-concise-update-logic-with-immer) el cual te permite usar métodos de ambas columnas.
 
 <Pitfall>
 
-Desafortunadamente, [`slice`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`splice`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) están nombrados de forma similar pero estos son my diferentes:
+Desafortunadamente, [`slice`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) y [`splice`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) tienen nombres muy similares pero son muy diferentes:
 
-* `slice` te permite copiar un arreglo o una parte del mismo.
-* `splice` **muta** el arreglo (para insertar o eliminar elementos).
+* `slice` te permite copiar un _array_ o una parte del mismo.
+* `splice` **muta** el _array_ (para insertar o eliminar elementos).
 
-En React, estarás usando `slice` (no `p`!) mucho más seguido porque no quieres mutar objetos o arreglos en el estado. [Actualizando objetos](/learn/updating-objects-in-state) explica qué es mutación y por qué esto no es recomendado para el estado.
+En React, estarás usando `slice` (no `p`!) mucho más seguido porque no quieres mutar objetos o _arrays_ en el estado. [Actualizar objetos](/learn/updating-objects-in-state) explica qué es mutación y por qué no se recomienda para el estado.
 
 </Pitfall>
 
-### Añadiendo un arreglo {/*adding-to-an-array*/}
+### Añadir a un _array_ {/*adding-to-an-array*/}
 
-`push()` muta un arreglo, lo cual no queremos:
+`push()` muta un _array_, lo cual no queremos:
 
 <Sandpack>
 
@@ -89,11 +89,11 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-En su lugar, crea un *nuevo* arreglo el cual contenga los elementos existentes *y* un nuevo elemento al final. Hay multiples formas para hacer esto, pero la más fácil es usar la sintaxis `...` [operador de propagación en arreglos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):
+En su lugar, crea un *nuevo* _array_ que contenga los elementos existentes *y* un nuevo elemento al final. Hay múltiples formas de hacerlo, pero la más fácil es usar la sintaxis `...` [de propagación en _arrays_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):
 
 ```js
-setArtists( // Remplaza el estado
-  [ // con el nuevo arreglo
+setArtists( // Reemplaza el estado
+  [ // con el nuevo _array_
     ...artists, // el cual contiene todos los elementos antiguos
     { id: nextId++, name: name } // y un nuevo elemento al final
   ]
@@ -143,7 +143,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-El operador de propagación también te permite anteponer un elemento colocandolo *antes* de el original `...artists`:
+El operador de propagación también te permite anteponer un elemento al colocarlo *antes* del original `...artists`:
 
 ```js
 setArtists([
@@ -152,11 +152,11 @@ setArtists([
 ]);
 ```
 
-De esta forma, el operador de propagación puede hacer el trabajo tanto de `push()` añadiendo en el final del arreglo como de `unshift()` agregando al comienzo de el arreglo. ¡Pruebalo en el editor de arriba!
+De esta forma, el operador de propagación puede hacer el trabajo tanto de `push()` añadiendo al final del _array_ como de `unshift()` agregando al comienzo del _array_. ¡Pruébalo en el editor de arriba!
 
-### Eliminando elementos de un arreglo {/*removing-from-an-array*/}
+### Eliminar elementos de un _array_ {/*removing-from-an-array*/}
 
-La forma más fácil de remover un elemento de un arreglo es *filtrarlo*. En otras palabras, producirás un nuevo arreglo el cual no contendrá ese elemento. Para hacer esto, usa el método `filter`, por ejemplo:
+La forma más fácil de eliminar un elemento de un _array_ es *filtrarlo*. En otras palabras, producirás un nuevo _array_ que no contendrá ese elemento. Para hacerlo, usa el método `filter`, por ejemplo:
 
 <Sandpack>
 
@@ -200,7 +200,7 @@ export default function List() {
 
 </Sandpack>
 
-Haz click en el botón de "Eliminar" varias veces, y mira su controlador de clics.
+Haz click en el botón "Eliminar" varias veces, y mira su manejador de clics.
 
 ```js
 setArtists(
@@ -208,13 +208,13 @@ setArtists(
 );
 ```
 
-Aquí, `artists.filter(a => a.id !== artist.id)` significa "crea un nuevo arreglo el cual consista de aquellos `artists` cuyos IDs son diferentes de `artist.id`". En otras palabras, el botón "Eliminar" de cada artista filtrará a _ese_ artista de el arreglo y luego solicitará una nueva representación con el arreglo resultante. Ten en cuenta que `filter` no modifica el arreglo original.
+Aquí, `artists.filter(a => a.id !== artist.id)` significa "crea un nuevo _array_ conformado por aquellos `artists` cuyos IDs son diferentes de `artist.id`". En otras palabras, el botón "Eliminar" de cada artista filtrará a _ese_ artista del _array_ y luego solicitará un rerenderizado con el _array_ resultante. Ten en cuenta que `filter` no modifica el _array_ original.
 
-### Transformando un arreglo {/*transforming-an-array*/}
+### Transformar un _array_ {/*transforming-an-array*/}
 
-Si deseas cambiar algunos o todos los elementos de el arreglo, puedes usar `map()` para crear un **nuevo** arreglo. La función que pasará a `map` puede decidir qué hacer con cada elemento, en función de sus datos o su índice (o ambos).
+Si deseas cambiar algunos o todos los elementos del _array_, puedes usar `map()` para crear un **nuevo** _array_. La función que pasarás a `map` puede decidir qué hacer con cada elemento, en función de sus datos o su índice (o ambos).
 
-En este ejemplo, un arreglo contiene las coordenadas de dos círculos y un cuadrado. Cuando presiona el botón, mueve solo los círculos 50 píxeles hacia abajo. Lo hace produciendo un nuevo arreglo de datos usando `map()`:
+En este ejemplo, un _array_ contiene las coordenadas de dos círculos y un cuadrado. Cuando presionas el botón, mueve solo los círculos 50 píxeles hacia abajo. Lo hace produciendo un nuevo _array_ de datos usando `map()`:
 
 <Sandpack>
 
@@ -245,7 +245,7 @@ export default function ShapeEditor() {
         };
       }
     });
-    // Vuelve a renderizar con el nuevo arreglo
+    // Vuelve a renderizar con el nuevo _array_
     setShapes(nextShapes);
   }
 
@@ -280,11 +280,11 @@ body { height: 300px; }
 
 </Sandpack>
 
-### Reemplazo de elementos en un arreglo {/*replacing-items-in-an-array*/}
+### Reemplazar elementos en un _array_ {/*replacing-items-in-an-array*/}
 
-Es particularmente común querer reemplazar uno o más elementos en un arreglo. Las asignaciones como `arr[0] = 'pájaro'` están mutando el arreglo original, por lo que también querrás usar `map` para esto.
+Es particularmente común querer reemplazar uno o más elementos en un _array_. Las asignaciones como `arr[0] = 'pájaro'` están mutando el _array_ original, por lo que para esto también querrás usar `map`.
 
-Para reemplazar un elemento, crea una un nuevo arreglo con `map`. Dentro de su llamada `map`, recibirá el índice del elemento como segundo argumento. Úsalo para decidir si devolver el elemento original (el primer argumento) o algo más:
+Para reemplazar un elemento, crea una un nuevo _array_ con `map`. Dentro de la llamada a `map`, recibirás el índice del elemento como segundo argumento. Úsalo para decidir si devolver el elemento original (el primer argumento) o algo más:
 
 <Sandpack>
 
@@ -334,9 +334,9 @@ button { margin: 5px; }
 
 </Sandpack>
 
-### Insertando en un arreglo {/*inserting-into-an-array*/}
+### Insertar en un _array_ {/*inserting-into-an-array*/}
 
-A veces, es posible que desees insertar un elemento en una posición particular que no esté ni al principio ni al final. Para hacer esto, puedes usar la sintaxis de propagación para arreglos `...` junto con el método `slice()`. El método `slice()` te permite cortar una "rebanada" de el arreglo. Para insertar un elemento, crearás un arreglo que extienda el segmento _antes_ del punto de inserción, luego el nuevo elemento y luego el resto de el arreglo original.
+A veces, es posible que desees insertar un elemento en una posición particular que no esté ni al principio ni al final. Para hacer esto, puedes usar la sintaxis de propagación para _arrays_ `...` junto con el método `slice()`. El método `slice()` te permite cortar una "rebanada" del _array_. Para insertar un elemento, crearás un _array_ que extienda el segmento _antes_ del punto de inserción, luego el nuevo elemento y luego el resto del _array_ original.
 
 En este ejemplo, el botón "Insertar" siempre inserta en el índice `1`:
 
@@ -398,11 +398,11 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-### Hacer otros cambios en un arreglo {/*making-other-changes-to-an-array*/}
+### Hacer otros cambios en un _array_ {/*making-other-changes-to-an-array*/}
 
-Hay algunas cosas que no puedes hacer con la sintaxis extendida y los métodos que no mutan como `map()` y `filter()` solos. Por ejemplo, es posible que desees invertir u ordenar un arreglo. Los métodos JavaScript `reverse()` y `sort()` están mutando el arreglo original, por lo que no puede usarlos directamente.
+Hay algunas cosas que no puedes hacer con la sintaxis extendida y los métodos que no mutan como `map()` y `filter()`. Por ejemplo, es posible que desees invertir u ordenar un _array_. Los métodos JavaScript `reverse()` y `sort()` mutan el _array_ original, por lo que no puedes usarlos directamente.
 
-**Sin embargo, puedes copiar el arreglo primero y luego realizar cambios en él.**
+**Sin embargo, puedes copiar el _array_ primero y luego realizar cambios en él.**
 
 Por ejemplo:
 
@@ -444,9 +444,9 @@ export default function List() {
 
 </Sandpack>
 
-Aquí, usa la sintaxis de propagación `[...list]` para crear primero una copia de el arreglo original. Ahora que tienes una copia, puedes usar métodos de mutación como `nextList.reverse()` o `nextList.sort()`, o incluso asignar elementos individuales con `nextList[0] = "algo"`.
+Aquí, usas la sintaxis de propagación `[...list]` para crear primero una copia del _array_ original. Ahora que tienes una copia, puedes usar métodos de mutación como `nextList.reverse()` o `nextList.sort()`, o incluso asignar elementos individuales con `nextList[0] = "algo"`.
 
-Sin embargo, **incluso si copias un arreglo, no puede mutar los elementos existentes _dentro_ de éste directamente.** Esto se debe a que la copia es superficial: el nuevo arreglo contendrá los mismos elementos que la original. Entonces, si modificas un objeto dentro de el arreglo copiado, estás mutando el estado existente. Por ejemplo, un código como este es un problema.
+Sin embargo, **incluso si copias un _array_, no puedes mutar los elementos existentes _dentro_ de éste directamente.** Esto se debe a que la copia es superficial: el nuevo _array_ contendrá los mismos elementos que el original. Entonces, si modificas un objeto dentro del _array_ copiado, estás mutando el estado existente. Por ejemplo, un código como este es un problema.
 
 ```js
 const nextList = [...list];
@@ -454,11 +454,11 @@ nextList[0].seen = true; // Problema: muta list[0]
 setList(nextList);
 ```
 
-Aunque `nextList` y `list` son dos arreglos diferentes, **`nextList[0]` y `list[0]` apuntan al mismo objeto.** Entonces, al cambiar `nextList[0].seen`, está también cambiando `list[0].seen`. ¡Esta es una mutación de estado que debes evitar! Puedes resolver este problema de forma similar a [actualizar objetos JavaScript anidados](/learn/updating-objects-in-state#updating-a-nested-object): copiando elementos individuales que deseas cambiar en lugar de mutarlos. Así es cómo.
+Aunque `nextList` y `list` son dos _arrays_ diferentes, **`nextList[0]` y `list[0]` apuntan al mismo objeto.** Entonces, al cambiar `nextList[0].seen`, está también cambiando `list[0].seen`. ¡Esta es una mutación de estado que debes evitar! Puedes resolver este problema de forma similar a [actualizar objetos JavaScript anidados](/learn/updating-objects-in-state#updating-a-nested-object): copiando elementos individuales que deseas cambiar en lugar de mutarlos. Así es cómo.
 
-## Actualizando objetos dentro de arreglos {/*updating-objects-inside-arrays*/}
+## Actualizar objetos dentro de _arrays_ {/*updating-objects-inside-arrays*/}
 
-Los objetos no están _realmente_ ubicados "dentro" de los arreglos. Puede parecer que están "dentro" del código, pero cada objeto en un arreglo es un valor separado, al que "apunta" el arreglo. Es por eso que debe tener cuidado al cambiar campos anidados como `list[0]`. ¡La lista de obras de arte de otra persona puede apuntar al mismo elemento de el arreglo!
+Los objetos no están _realmente_ ubicados "dentro" de los _arrays_. Puede parecer que están "dentro" del código, pero cada objeto en un _array_ es un valor separado, al que "apunta" el _array_. Es por eso que debe tener cuidado al cambiar campos anidados como `list[0]`. ¡La lista de obras de arte de otra persona puede apuntar al mismo elemento del _array_!
 
 **Al actualizar el estado anidado, debe crear copias desde el punto en el que desea actualizar y hasta el nivel superior.** Veamos cómo funciona esto.
 
@@ -502,12 +502,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Bucket de arte</h1>
-      <h2>Mi lista de arte para ver:</h2>
+      <h1>Lista de deseos de arte</h1>
+      <h2>Mi lista de obras de arte para ver:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Tu lista de arte para ver:</h2>
+      <h2>Tu lista de obras de arte para ver:</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -551,7 +551,7 @@ artwork.seen = nextSeen; // Problema: muta un elemento existente
 setMyList(myNextList);
 ```
 
-Aunque el arreglo `myNextList` en sí mismo es nuevo, los *elementos iguales* son los mismos que en el arreglo `myList` original. Entonces, cambiar `artwork.seen` cambia el elemento de la obra de arte *original*. Ese elemento de la obra de arte también está en `yourArtworks`, lo que causa el error. Errores como este pueden ser difíciles de pensar, pero afortunadamente desaparecen si evitas el estado de mutación.
+Aunque el _array_ `myNextList` en sí mismo es nuevo, los *propios elementos* son los mismos que en el _array_ `myList` original. Entonces, cambiar `artwork.seen` cambia el elemento de la obra de arte *original*. Ese elemento de la obra de arte también está en `yourArtworks`, lo que causa el error. Puede ser difícil pensar en errores como este, pero afortunadamente desaparecen si evitas mutar el estado.
 
 **Puedes usar `map` para sustituir un elemento antiguo con su versión actualizada sin mutación.**
 
@@ -615,12 +615,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Bucket de arte</h1>
-      <h2>Mi lista de arte para ver:</h2>
+      <h1>Lista de deseos de arte</h1>
+      <h2>Mi lista de obras de arte para ver:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Tu lista de arte para ver:</h2>
+      <h2>Tu lista de obras de arte para ver:</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -655,16 +655,16 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-En general, **solo debes mutar objetos que acaba de crear.** Si estuvieras insertando una *nueva* obra de arte, podría mutarla, pero si se trata de algo que ya está en estado, debes hacer una copia.
+En general, **solo debes mutar objetos que acabas de crear.** Si estuvieras insertando una *nueva* obra de arte, podrías mutarla, pero si se trata de algo que ya está en el estado, debes hacer una copia.
 
 ### Escribe una lógica de actualización concisa con Immer {/*write-concise-update-logic-with-immer*/}
 
-Al actualizar arreglos anidados sin mutación puede volverse un poco repetitivo. [Al igual que con los objetos](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
+Actualizar _arrays_ anidados sin mutación puede volverse un poco repetitivo. [Al igual que con los objetos](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
-- En general, no deberías de necesitar actualizar el estado más de un par de niveles de profundidad. Si tus objetos de estado son muy profundos, es posible que desees [reestructurarlos de manera diferente](/learn/choosing-the-state-structure#avoid-deeply-nested-state) para que sean planos.
-- Si no deseas cambiar su estructura de estado, puedes preferir usar [Immer](https://github.com/immerjs/use-immer), que te permite escribir usando la sintaxis conveniente pero cambiante y se encarga de producir las copias para usted.
+- En general, no deberías necesitar actualizar el estado más de un par de niveles de profundidad. Si tus objetos de estado son muy profundos, es posible que desees [reestructurarlos de manera diferente](/learn/choosing-the-state-structure#avoid-deeply-nested-state) para que sean planos.
+- Si no deseas cambiar la estructura de tu estado, puedes preferir usar [Immer](https://github.com/immerjs/use-immer), que te permite escribir usando la sintaxis conveniente, pero que realiza mutaciones, y se encarga de producir las copias por ti.
 
-Aquí está el ejemplo de un Bucket de arte reescrito con Immer:
+Aquí está el ejemplo de una Lista de deseos de arte reescrito con Immer:
 
 <Sandpack>
 
@@ -707,12 +707,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Bucket de arte</h1>
-      <h2>Mi lista de arte para ver:</h2>
+      <h1>Lista de deseos de arte</h1>
+      <h2>Mi lista de obras de arte para ver:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Tu lista de arte para ver:</h2>
+      <h2>Tu lista de obras de arte para ver:</h2>
       <ItemList
         artworks={yourArtworks}
         onToggle={handleToggleYourList} />
@@ -776,15 +776,15 @@ updateMyTodos(draft => {
 
 Esto se debe a que no está mutando el estado _original_, sino que está mutando un objeto `draft` especial proporcionado por Immer. Del mismo modo, puedes aplicar métodos de mutación como `push()` y `pop()` al contenido del `draft`.
 
-Detrás de escena, Immer siempre construye el siguiente estado desde cero de acuerdo con los cambios que ha realizado en el `draft`. Esto mantiene sus controladores de eventos muy concisos sin cambiar nunca el estado.
+Tras bambalinas, Immer siempre construye el siguiente estado desde cero de acuerdo con los cambios que ha realizado en el `draft`. Esto mantiene tus controladores de eventos muy concisos sin mutar nunca el estado.
 
 <Recap>
 
-- Puedes poner arreglos en el estado, pero no puedes cambiarlos.
-- En lugar de mutar un arreglo, crea una *nueva* versión y actualiza el estado.
-- Puedes usar la sintaxis de propagación `[...arr, newItem]` para crear arreglos con nuevos elementos.
-- Puedes usar `filter()` y `map()` para crear nuevos arreglos con elementos filtrados o transformados.
-- Puedes usar Immer para mantener su código conciso.
+- Puedes poner _arrays_ en el estado, pero no puedes cambiarlos.
+- En lugar de mutar un _array_, crea una *nueva* versión y actualiza el estado.
+- Puedes usar la sintaxis de propagación `[...arr, newItem]` para crear _arrays_ con nuevos elementos.
+- Puedes usar `filter()` y `map()` para crear nuevos _arrays_ con elementos filtrados o transformados.
+- Puedes usar Immer para mantener tu código conciso.
 
 </Recap>
 
@@ -852,7 +852,7 @@ button { margin: 5px; }
 
 <Solution>
 
-Puedes usar la función `map` para crear un nuevo arreglo, y luego usar la sintaxis del operador de propagación de objetos `...` para crear una copia del objeto modificado para el nuevo arreglo:
+Puedes usar la función `map` para crear un nuevo _array_, y luego usar la sintaxis del operador de propagación de objetos `...` para crear una copia del objeto modificado para el nuevo _array_:
 
 <Sandpack>
 
@@ -991,7 +991,7 @@ button { margin: 5px; }
 
 <Solution>
 
-Primero puedes usar `map` para producir un nuevo arreglo, y luego `filter` para eliminar productos con un `count` establecido en `0`:
+Primero puedes usar `map` para producir un nuevo _array_, y luego `filter` para eliminar productos con un `count` establecido en `0`:
 
 <Sandpack>
 
@@ -1080,9 +1080,9 @@ button { margin: 5px; }
 
 </Solution>
 
-#### Repara las mutaciones usando métodos no mutativos {/*fix-the-mutations-using-non-mutative-methods*/}
+#### Repara las mutaciones usando métodos que no muten {/*fix-the-mutations-using-non-mutative-methods*/}
 
-En este ejemplo, todos los controladores de eventos en `App.js` usan mutación. Como resultado, la edición y eliminación de todos no funciona. Vuelva a escribir `handleAddTodo`, `handleChangeTodo` y `handleDeleteTodo` para usar los métodos no mutativos:
+En este ejemplo, todos los controladores de eventos en `App.js` usan mutación. Como resultado, la edición y eliminación de tareas no funciona. Vuelve a escribir `handleAddTodo`, `handleChangeTodo` y `handleDeleteTodo` para usar los métodos no que no realicen mutaciones:
 
 <Sandpack>
 
@@ -1245,7 +1245,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-En `handleAddTodo`, puedes usar el operador de propagación de arreglos. En `handleChangeTodo`, puedes crear un nuevo arreglo con `map`. En `handleDeleteTodo`, puedes crear un nuevo arreglo con `filter`. Ahora la lista funciona correctamente:
+En `handleAddTodo`, puedes usar el operador de propagación de _arrays_. En `handleChangeTodo`, puedes crear un nuevo _array_ con `map`. En `handleDeleteTodo`, puedes crear un nuevo _array_ con `filter`. Ahora la lista funciona correctamente:
 
 <Sandpack>
 
@@ -1415,7 +1415,7 @@ ul, li { margin: 0; padding: 0; }
 
 #### Arregla las mutaciones usando Immer {/*fix-the-mutations-using-immer*/}
 
-Este es el mismo ejemplo que en el desafío anterior. Esta vez, arregla las mutaciones usando Immer. Para tú comodidad, `useImmer` ya está importado, por lo que debes cambiar la variable de estado `todos` para usarlo.
+Este es el mismo ejemplo que en el desafío anterior. Esta vez, arregla las mutaciones usando Immer. Para tu comodidad, `useImmer` ya está importado, por lo que debes cambiar la variable de estado `todos` para usarlo.
 
 <Sandpack>
 
@@ -1597,7 +1597,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-Con Immer, puedes escribir código de forma mutativa, siempre y cuando solo esté mutando partes del `draft` que Immer le proporciona. Aquí, todas las mutaciones se realizan en el `draft` para que el código funcione:
+Con Immer, puedes escribir código con estilo de mutación, siempre y cuando solo esté mutando partes del `draft` que Immer te proporciona. Aquí, todas las mutaciones se realizan en el `draft` para que el código funcione:
 
 <Sandpack>
 
@@ -1783,9 +1783,9 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-También puede mezclar y combinar los enfoques mutativos y no mutativos con Immer.
+También puede mezclar y combinar los enfoques de mutación y no mutación con Immer.
 
-Por ejemplo, en esta versión `handleAddTodo` es implementado usando Immer `draft`, mientras `handleChangeTodo` y `handleDeleteTodo` usa los métodos no mutativos `map` y `filter`:
+Por ejemplo, en esta versión `handleAddTodo` se implementa con la mutación del `draft` de Immer, mientras `handleChangeTodo` y `handleDeleteTodo` usa los métodos sin mutación `map` y `filter`:
 
 <Sandpack>
 
@@ -1968,7 +1968,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Con Immer, puedes elegir el estilo el cual se sienta más natural por cada caso separado.
+Con Immer, puedes elegir el estilo que se sienta más natural para cada caso individual.
 
 </Solution>
 

From 67bf3200ef10fc7bb20e5786432b45e2a7ae415c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Sat, 22 Oct 2022 12:39:48 -0400
Subject: [PATCH 3/4] Update updating-arrays-in-state.md

---
 beta/src/content/learn/updating-arrays-in-state.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/content/learn/updating-arrays-in-state.md b/beta/src/content/learn/updating-arrays-in-state.md
index b9154ae8e..7fc7a84d9 100644
--- a/beta/src/content/learn/updating-arrays-in-state.md
+++ b/beta/src/content/learn/updating-arrays-in-state.md
@@ -20,13 +20,13 @@ Los _arrays_ son mutables en JavaScript, pero deberían tratarse como inmutables
 
 En JavaScript, los _arrays_ son solo otro tipo de objeto. [Como con los objetos](/learn/updating-objects-in-state), **deberías tratar los _arrays_ en el estado de React como si fueran de solo lectura.** Esto significa que no deberías reasignar elementos dentro de un _array_ como `arr[0] = 'pájaro'`, y tampoco deberías usar métodos que puedan mutar el _array_, como `push()` y `pop()`.
 
-En su lugar, cada vez que quieras actualizar un _array_, querrás pasar un, *nuevo* _array_ a la función de asignación de estado. Para hacerlo, puedes crear un nuevo _array_ a partir del _array_ original en el estado si llamas a sus métodos que no lo muten como `filter()` y `map()`. Luego puedes asignar el estado a partir del nuevo _array_ resultante.
+En su lugar, cada vez que quieras actualizar un _array_, querrás pasar un *nuevo* _array_ a la función de asignación de estado. Para hacerlo, puedes crear un nuevo _array_ a partir del _array_ original en el estado si llamas a sus métodos que no lo muten como `filter()` y `map()`. Luego puedes asignar el estado a partir del nuevo _array_ resultante.
 
 Aquí hay una tabla de referencia con las operaciones más comunes con _arrays_. Cuando se trata de _arrays_ dentro del estado de React, necesitarás evitar los métodos de la columna izquierda, y en su lugar es preferible usar los métodos de la columna derecha.
 
 |              | evita (muta el _array_)                  | preferido (retorna un nuevo _array_)                                         |
 |--------------|------------------------------------------|------------------------------------------------------------------------------|
-| insertar    | `push`, `unshift`                        | `concat`, `[...arr]` operador de propagación ([ejemplo](#adding-to-an-array))|
+| añadir    | `push`, `unshift`                        | `concat`, `[...arr]` operador de propagación ([ejemplo](#adding-to-an-array))|
 | eliminar   | `pop`, `shift`, `splice`                 | `filter`, `slice` ([ejemplo](#removing-from-an-array))                       |
 | reemplazar | `splice`, `arr[i] = ...` asigna          | `map` ([ejemplo](#replacing-items-in-an-array))                              |
 | ordenar    | `reverse`, `sort`                        | copia el _array_ primero ([ejemplo](#making-other-changes-to-an-array))      |

From 7d6e69735f18a9e757eeb69a30fd9861e630c96c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Sat, 22 Oct 2022 12:41:36 -0400
Subject: [PATCH 4/4] Update updating-arrays-in-state.md

---
 beta/src/content/learn/updating-arrays-in-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/updating-arrays-in-state.md b/beta/src/content/learn/updating-arrays-in-state.md
index 7fc7a84d9..a640d27d4 100644
--- a/beta/src/content/learn/updating-arrays-in-state.md
+++ b/beta/src/content/learn/updating-arrays-in-state.md
@@ -1,5 +1,5 @@
 ---
-title: Actualizar _arrays_ en el estado
+title: Actualizar arrays en el estado
 ---
 
 <Intro>