`:](/apis/react/Fragment#rendering-a-list-of-fragments)
```js
import { Fragment } from 'react';
@@ -391,46 +391,46 @@ const listItems = people.map(person =>
);
```
-Fragments disappear from the DOM, so this will produce a flat list of ``, `
`, `
`, `
`, and so on.
+Los Fragments desaparecen del DOM, así que esto producirá una lista plana de `
`, `
`, `
`, `
`, y así.
-### Where to get your `key` {/*where-to-get-your-key*/}
+### Dónde conseguir tu `key` {/*where-to-get-your-key*/}
-Different sources of data provide different sources of keys:
+Distintas fuentes de datos dan diferentes fuentes de keys:
-* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
-* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+* **Datos de una base de datos:** Si tus datos vienen de una base de datos, puedes usar las keys/IDs de la base de datos, que son únicas por naturaleza.
+* **Datos generados localmente:** Si tus datos son generados y persistidos localmente (p. ej. notas en una app de tomar notas), usa un contador incremental, [`crypto.randomUUID()`](https://developer.mozilla.org/es/docs/Web/API/Crypto/randomUUID) o un paquete como [`uuid`](https://www.npmjs.com/package/uuid) cuando este creando objetos.
-### Rules of keys {/*rules-of-keys*/}
+### Reglas de las keys {/*rules-of-keys*/}
-* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays.
-* **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+* **Las keys tienen que ser únicas entre elementos hermanos.** Sin embargo, está bien usar las mismas keys para nodos JSX en arrays _diferentes_.
+* **Las keys no tienen que cambiar** o ¡eso quitará su propósito! No las generes mientras renderizas.
-### Why does React need keys? {/*why-does-react-need-keys*/}
+### ¿Por qué React necesita keys? {/*why-does-react-need-keys*/}
-Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+Imagina que los archivos de tu escritorio no tuvieran nombres. En vez de eso, tu te referirías a ellos por su orden -- el primer archivo, el segundo, y así. Podrías acostumbrarte a ello, pero una vez borres un archivo, se volvería algo confuso. El segundo archivo se convertiría en el primero, el tercer archivo se convertiría en el segundo, y así.
-File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+Los nombres de archivos en una carpeta y las keys JSX en un array tienen un propósito similar. Nos permiten identificar un objeto de manera única entre sus hermanos. Una key bien escogida da más información aparte de la posición en el array. incluso si la _posición_ cambia devido a un reordenamiento, la `key` permite a React identificar al elemento a lo largo de su ciclo de vida.
-You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+Podrías estar tentado a usar el índice del elemento en el array como su key. De hecho, eso es lo que React usará si tu no especifícas un `key` en absoluto. Pero el orden en el que renderizas elementos cambiará con el tiempo si un elemento es insertado, borrado, o si se reordena su array. El índice como key lleva a menudo a sutiles y confusos errores.
-Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+Igualmente, no generes keys sobre la marcha, p. ej. con `key={Math.random()}`. Esto hará que las keys nunca coincidan entre renderizados, llevando a todos tus componentes y al DOM a recrearse cada vez. No solo es una manera lenta, si no que también pierde cualquier input del usuario dentro de los elementos listados. En vez de eso, usa unas IDs basadas en datos.
-Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: ``.
+Date cuenta de que tus componentes no reciben la `key` como un prop. Solo es usado como pista para React. Si tus componentes necesitan un ID, se lo tienes que pasar como una prop separada: ``.
-On this page you learned:
+En esta página has aprendido:
-* How to move data out of components and into data structures like arrays and objects.
-* How to generate sets of similar components with JavaScript's `map()`.
-* How to create arrays of filtered items with JavaScript's `filter()`.
-* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+* Como mover datos fuera de componentes y en estructuras de datos como arrays y objetos.
+* Como genrerar sets de componentes similares con el método `map()` de JavaScript.
+* Como crear arrays de objetos filtrados con el método `filter()` de JavaScript.
+* Por qué y cómo poner la `key` en cada componente en una colección para que React pueda seguir la pista de cada uno de ellos incluso si su posición o datos cambia.
@@ -438,11 +438,11 @@ On this page you learned:
-#### Splitting a list in two {/*splitting-a-list-in-two*/}
+#### Dividir una lista en dos {/*splitting-a-list-in-two*/}
-This example shows a list of all people.
+Este ejemplo muestra una lista de todas las personas.
-Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+Cambiala para mostrar dos listas separadas, una detrás de otra : **Químicos** y **Cualquier otro.** Como antes, puedes saber que persona es química comprobando si `person.profession === 'chemist'`.
@@ -533,7 +533,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+Podrías usar el método `filter()` dos veces, creando dos arrays separados, y entonces un `map` sobre ambos:
@@ -646,9 +646,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-In this solution, the `map` calls are placed directly inline into the parent `` elements, but you could introduce variables for them if you find that more readable.
+En esta solución, las llamadas al `map` están puestas directamente en línea dentro de los elementos padre `` , pero podrías instroducir variables para ellos si eso te parece más legible.
-There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `` component:
+Aún hay un poco de repetición entre las listas renderizadas. Puedes ir más lejos aún y extraer las partes repetitivas en un componente ``:
@@ -760,9 +760,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+Un lector muy atento podría notar que con dos llamadas al `filter`, comprobamos la profesión de las personas dos veces. Comprobar una propiedad es muy rápido, asi que en este ejemplo está bien. Si tu lógica fuese más costosa que eso, podrías reemplazar las llamadas al `filter` con un bucle que manualmente construya los arrays y compruebe a cada persona una vez.
-In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters if that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+De hecho, si `people` nunca cambia, podrías mover este código fuera del componente. Desde la prespectiva de React, lo único que importa es si le has dado un array de nodos JSX en el final. No importa como produces ese array:
@@ -880,13 +880,13 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-#### Nested lists in one component {/*nested-lists-in-one-component*/}
+#### Listas anidadas en un componente {/*nested-lists-in-one-component*/}
-Make a list of recipes from this array! For each recipe in the array, display its title as an `` and list its ingredients in a ``.
+¡Haz una lista de recetas desde este array! Por cada receta en el array, coloca su título en un `` y lista sus ingredientes en un ``.
-This will require nesting two different `map` calls.
+Esto va a requerir anidar dos llamadas al método `map` diferentes.
@@ -924,7 +924,7 @@ export const recipes = [{
-Here is one way you could go about it:
+Esta es una forma en la que podrías conseguirlo:
@@ -970,13 +970,13 @@ export const recipes = [{
-Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
+Cada una de las `recipes` ya incluye un campo `id`, y eso es lo que el bucle exterior usa para su `key`. No hay un ID que puedas usar para hacer un bucle sobre los ingredientes. Sin embargo, es razonable asumir que el mismo ingrediente no estará listado dos veces dentro de la misma receta, por lo tanto su nombre puede servir como `key`. Alternativamente, podrías cambiar la estructura de los datos para añadir IDs, o usar el índice como `key` (con la advertencia de que no puedes reordenar ingredientes de forma segura).
-#### Extracting a list item component {/*extracting-a-list-item-component*/}
+#### Extraer un componente de elemento de lista{/*extracting-a-list-item-component*/}
-This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
+Este componente `RecipeList` contiene dos llamadas `map` anidadas. Para simplificarlo, extrae un componente `Recipe` de el que aceptará las props `id`, `name`, y `ingredients`. ¿Dónde colocarías la `key` exterior y por qué?
@@ -1024,7 +1024,7 @@ export const recipes = [{
-You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
+Puedes copiar y pegar el JSX del `map` exterior en un nuevo componente `Recipe` y devolver ese JSX. Entonces puedes cambiar el `recipe.name` a `name`, `recipe.id` a `id`, y así, y pasarlos como props al componente `Recipe`:
@@ -1076,15 +1076,15 @@ export const recipes = [{
-Here, `` is a syntax shortcut saying "pass all properties of the `recipe` object as props to the `Recipe` component". You could also write each prop explicitly: ``.
+Aquí, `` es un atajo de sintaxis diciendo "pasa todas las propiedades del obejto `recipe` como props al componente `Recipe`". También podrías escribir cada prop explícitamente: ``.
-**Note that the `key` is specified on the `` itself rather than on the root `` returned from `Recipe`.** This is because this `key` is needed directly within the context of the surrounding array. Previously, you had an array of `
`s so each of them needed a `key`, but now you have an array of `
`s. In other words, when you extract a component, don't forget to leave the `key` outside the JSX you copy and paste.
+**Date cuente que la `key` está especificada en el `` en sí más que en el `` raíz devuelto de `Recipe`.** Esto es porque esta `key` es necesaria directamente dentro del contexto del array circundante. Anteriormente, tenías un array de `
`s así que cada uno necesitaba una `key`, pero ahora tienes un array de `
`s. Es decir, cuando extraes un componente, no te olvides de dejar la `key` fuera del JSX que has copiado y pegado.
-#### List with a separator {/*list-with-a-separator*/}
+#### Lista con un separador {/*list-with-a-separator*/}
-This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `` tag. Your job is to insert an `
` separator between each paragraph. Your resulting structure should look like this:
+Este ejemplo renderiza un haiku famoso escrito por Katsushika Hokusai, con cada línea envuelta en una etiqueta ``. Tu trabajo es insertar un separador `
` entre cada párrafo. Tu estructura final debería verse algo como esto:
```js
@@ -1096,7 +1096,7 @@ This example renders a famous haiku by Katsushika Hokusai, with each line wrappe
```
-A haiku only contains three lines, but your solution should work with any number of lines. Note that `
` elements only appear *between* the `` elements, not in the beginning or the end!
+Un haiku solo tiene tres líneas, pero tu solución debería funcionar con cualquier número de líneas. Fíjate que los elementos `
` solo aparecen *entre* los elementos ``, ¡no en el inicio o el final!
@@ -1139,17 +1139,17 @@ hr {
-(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.)
+(Este es un caso raro donde el índice como key es aceptable porque las líneas de los poemas nunca se van a reordenar.)
-You'll either need to convert `map` to a manual loop, or use a fragment.
+Tendrás que convertir los `map` en un bucle manual, o usar un fragment.
-You can write a manual loop, inserting `
` and `...
` into the output array as you go:
+Puedes escribir un bucle manual, insertando `
` y `...
` en el array de salida a medida que avanzas:
@@ -1204,9 +1204,9 @@ hr {
-Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`.
+Usar el índice de la línea original como `key` ya no funciona porque cada separador y cada párrafo están ahora en el mismo array. Sin embargo, puedes darle a cada uno de ellos una key distintiva usando un sufijo, p. ej. `key={i + '-text'}`.
-Alternatively, you could render a collection of fragments which contain `
` and `...
`. However, the `<>...` shorthand syntax doesn't support passing keys, so you'd have to write `` explicitly:
+De forma alternativa, puedes renderizar una colección de fragments que contengan `
` y `...
`. Sin embargo, el atajo de sintaxis `<>...` no admite pasarle keys, así que tendrás que escribir `` explícitamente:
@@ -1252,7 +1252,7 @@ hr {
-Remember, fragments (often written as `<> `) let you group JSX nodes without adding extra ``s!
+Recuerda, ¡los fragments (a menudo escritos como `<> `) te permiten agrupar nodos JSX sin añadir `
`s extra!