Skip to content

Lists and Keys Translation #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Feb 5, 2019
Merged

Lists and Keys Translation #22

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f70d42b
First
EzequielMonforte Feb 1, 2019
a87db3f
ticks added
EzequielMonforte Feb 1, 2019
5ebb87e
correct some mistakes
EzequielMonforte Feb 2, 2019
1bd23cf
correcting mistakes-1
EzequielMonforte Feb 2, 2019
b1d080d
mistakes correction
Feb 5, 2019
34ab88e
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
0f9c45a
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
3a7ded6
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
bd3eab4
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
c8b6a57
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
0eba264
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
e703bab
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
abc22b2
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
0879a4f
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
d0f1e55
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
e1903f8
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
0fbe78c
Update content/docs/lists-and-keys.md
carburo Feb 5, 2019
16d44c7
suggestions applied2
Feb 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions content/docs/lists-and-keys.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
id: lists-and-keys
title: Lists and Keys
title: Listas y keys
permalink: docs/lists-and-keys.html
prev: conditional-rendering.html
next: forms.html
---

First, let's review how you transform lists in JavaScript.
Primero, vamos a revisar como transformas listas en Javascript.

Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
Dado el codigo de abajo, usamos el [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:

```javascript{2}
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
```

This code logs `[2, 4, 6, 8, 10]` to the console.
Este codigo muestra `[2, 4, 6, 8, 10]` a la consola.

In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
En react, transformar arrays en listas de [elementos](/docs/rendering-elements.html) es casi identico.

### Rendering Multiple Components
### Renderizando Multiples Componentes

You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
Puedes hacer colecciones de elementos e [incluirlos en JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) usando llaves `{}`.

Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
Debajo, recorreremos el arreglo `numbers` usando la funcion [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) de Javascript. Devolvemos un elemento `<li>` por cada item . Finalmente, asignamos el array resultante de elementos a `listItems`:

```javascript{2-4}
const numbers = [1, 2, 3, 4, 5];
Expand All @@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
);
```

We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
Incluimos entero el arreglo `listItems` dentro de un elemento `<ul>`, y [lo renderizamos al DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):

```javascript{2}
ReactDOM.render(
Expand All @@ -42,15 +42,15 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
[**Pruebalo en CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)

This code displays a bullet list of numbers between 1 and 5.
Este codigo muestra una lista de numeros entre 1 y 5.

### Basic List Component
### Componente de Lista Basica

Usually you would render lists inside a [component](/docs/components-and-props.html).
Usualmente renderizarias listas dentro de un [componente](/docs/components-and-props.html).

We can refactor the previous example into a component that accepts an array of `numbers` and outputs an unordered list of elements.
Podemos refactorizar el ejemplo anterior en un componente que acepte un array de `numbers` e imprima una lista desordenada de elementos.

```javascript{3-5,7,13}
function NumberList(props) {
Expand All @@ -70,9 +70,9 @@ ReactDOM.render(
);
```

When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
Cuando ejecutes este codigo, Seras advertido que una key debe ser proporcionada para listar items. Una "key" es un atributo especial string que debes incluir al crear listas de elementos. Vamos a discutir porque esto es importante en la proxima seccion.

Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
Vamos a asignar una `key` a nuestra lista de items dentro de `numbers.map()` y arreglar el problema de la falta de key.

```javascript{4}
function NumberList(props) {
Expand All @@ -94,11 +94,11 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
[**Pruebalo en CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)

## Keys

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
Keys ayudan a React a identificar que items han cambiado, son agregados, o son eliminados. Las keys deben ser dadas a los elementos dentro del array para darle a los elementos una identidad estable:

```js{3}
const numbers = [1, 2, 3, 4, 5];
Expand All @@ -109,7 +109,7 @@ const listItems = numbers.map((number) =>
);
```

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
La mejor forma de elegir una key es usar un string que idenfique unicamente a un elemento de la lista entre sus hermanos. Con mas frecuencia vas a usar IDs de tus datos como key:

```js{2}
const todoItems = todos.map((todo) =>
Expand All @@ -119,7 +119,7 @@ const todoItems = todos.map((todo) =>
);
```

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
Cuando no tengas IDs estables para renderizar, podrias usar el indice del item como una key como ultimo recurso:

```js{2,3}
const todoItems = todos.map((todo, index) =>
Expand All @@ -130,17 +130,17 @@ const todoItems = todos.map((todo, index) =>
);
```

We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
No recomendamos usar indices para keys si el orden de los items puede cambiar. Esto puede impactar negativamente el rendimiento y puede causar problemas con el estado del componente. Revisa el articulo de Robin Pokorny para una [explicacion en profundidad de los impactos negativos de usar un indice como key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Si eliges no asignar una key explicita a la lista de items, React por defecto usara indices como keys.

Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
Aqui esta una [explicacion en profundidad sobre porque las keys son necesarias](/docs/reconciliation.html#recursing-on-children) si estas interesado en aprender mas.

### Extracting Components with Keys
### Extraccion de Components con Keys

Keys only make sense in the context of the surrounding array.
Las keys solo tienen sentido en el contexto de un array circundante.

For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
Por ejemplo, si [extraes](/docs/components-and-props.html#extracting-components) un componente `ListItem`, debes mantener la key en el elemnto `<ListItem />` en el array en lugar de en el elemento `<li>` en el `ListItem` en si mismo.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this can be better translated this way:

... debes mantener la key en los elementos <ListItem /> en el array en lugar de en los elementos <li> en el ListItem en sí.

Regardless of that, note elemnto before <ListItem />, it should be elemento/s
Note

Copy link
Contributor Author

@EzequielMonforte EzequielMonforte Feb 2, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO

...derberias mantener la key en los elementos <ListItem /> en el array en lugar de en el elemento <li> en el <ListItem /> en si mismo.

Sounds better. What do you think?


**Example: Incorrect Key Usage**
**Ejemplo: Uso Incorrecto de Key**

```javascript{4,5,14,15}
function ListItem(props) {
Expand Down Expand Up @@ -173,7 +173,7 @@ ReactDOM.render(
);
```

**Example: Correct Key Usage**
**Ejemplo: Uso Correcto de Key**

```javascript{2,3,9,10}
function ListItem(props) {
Expand Down Expand Up @@ -202,13 +202,13 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
[**Pruebalo en CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)

A good rule of thumb is that elements inside the `map()` call need keys.
Una buena regla es que los elementos dentro de `map()` necesitan keys.

### Keys Must Only Be Unique Among Siblings
### Las Keys Deben Ser Solo Unicas Entre Hermanos

Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
Las keys usadas dentro de arrays deberian ser unicas entre sus hermanos. Sin embargo, no necesitan ser unicas globalmente. Podemos usar las mismas keys cuando creamos dos arrays diferentes:

```js{2,5,11,12,19,21}
function Blog(props) {
Expand Down Expand Up @@ -246,9 +246,9 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
[**Pruebalo en CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)

Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
Las keys sirven como una sugerencia para React pero no son pasadas a tus componentes. Si necesitas usar el mismo valor en tu componente, pasasela explicitamente como una propiedad con un nombre diferente:

```js{3,4}
const content = posts.map((post) =>
Expand All @@ -259,11 +259,11 @@ const content = posts.map((post) =>
);
```

With the example above, the `Post` component can read `props.id`, but not `props.key`.
Con el ejemplo de arriba, el componente `Post` puede leer `props.id`, pero no `props.key`.

### Embedding map() in JSX
### Incrustando map() en JSX

In the examples above we declared a separate `listItems` variable and included it in JSX:
En los ejemplos de arriba declaramos una variable separada `listItems` y la incluimos en JSX:

```js{3-6}
function NumberList(props) {
Expand Down Expand Up @@ -296,6 +296,6 @@ function NumberList(props) {
}
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
[**Pruebalo en CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)

Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
Algunas veces esto resulta en codigo mas claro, pero este estilo puede ser tambien abusado. Como en JavaScript, depende de ti decidir cuando vale la pena extraer una variable por legibilidad. Ten en mente que si el cuerpo de `map()` esta muy anidado, puede ser un buen momento para [extraer un componente](/docs/components-and-props.html#extracting-components).