{"componentChunkName":"component---src-templates-docs-js","path":"/docs/lists-and-keys.html","result":{"data":{"markdownRemark":{"html":"

Primeiro, vamos rever como transformamos listas em JavaScript.

\n

Dado o código abaixo, nós usamos a função map() para receber um array de números e dobrar o valor de cada um deles. Atribuímos o novo array retornado pela função map() para a variável doubled e imprime no console:

\n
const numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map((number) => number * 2);console.log(doubled);
\n

Esse código imprime [2, 4, 6, 8, 10] no console.

\n

No React, transformar arrays em listas de elementos é praticamente idêntico a isso.

\n

Renderizando Múltiplos Componentes

\n

Você pode criar coleções de elementos e adicioná-los no JSX usando chaves {}.

\n

Abaixo, iteramos pelo array numbers usando a função map() do JavaScript. Retornamos um elemento <li> para cada item. Finalmente, atribuímos o array de elementos resultante para listItems:

\n
const numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) =>  <li>{number}</li>);
\n

Adicionamos todo o array listItems dentro de um elemento <ul> e renderizamos ele no DOM:

\n
ReactDOM.render(\n  <ul>{listItems}</ul>,  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

Esse código mostra uma lista não ordenada de números entre 1 e 5.

\n

Componente de Lista Básico

\n

Geralmente você irá renderizar listas dentro de um componente.

\n

Podemos refatorar o exemplo anterior em um componente que aceita um array de números e retorna uma lista de elementos.

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (\n    <ul>{listItems}</ul>  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,  document.getElementById('root')\n);
\n

Ao executar esse código, você receberá um aviso que uma chave deve ser definida para os itens da lista. key é um atributo string especial que você precisa definir ao criar listas de elementos. Iremos analisar os motivos pelos quais isso é importante na próxima seção.

\n

Vamos atribuir uma key aos itens da nossa lista dentro de numbers.map() e resolver o valor da chave que está em falta.

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n    <li key={number.toString()}>      {number}\n    </li>\n  );\n  return (\n    <ul>{listItems}</ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

Chaves

\n

As chaves ajudam o React a identificar quais itens sofreram alterações, foram adicionados ou removidos. As chaves devem ser atribuídas aos elementos dentro do array para dar uma identidade estável aos elementos:

\n
const numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) =>\n  <li key={number.toString()}>    {number}\n  </li>\n);
\n

A melhor forma de escolher uma chave é usar uma string que identifica unicamente um item da lista dentre os demais. Na maioria das vezes você usaria IDs de seus dados como chave:

\n
const todoItems = todos.map((todo) =>\n  <li key={todo.id}>    {todo.text}\n  </li>\n);
\n

Quando você não possui nenhum ID estável para os itens renderizados, você pode usar o índice do item como chave em último recurso:

\n
const todoItems = todos.map((todo, index) =>\n  // Apenas faça isso caso os itens não possuam IDs estáveis  <li key={index}>    {todo.text}\n  </li>\n);
\n

Não recomendamos o uso de índices para chave se a ordem dos itens pode ser alterada. Isso pode impactar de forma negativa o desempenho e poderá causar problemas com o estado do componente. Leia o artigo escrito por Robin Pokorny para uma explicação aprofundada nos impactos negativos de se usar um índice como chave. Se você não atribuir uma chave de forma explícita para os itens de uma lista, então o React irá utilizar os índices como chave por padrão.

\n

Aqui você poderá ver uma explicação aprofundada sobre o porquê o uso das chaves é necessário caso você esteja interessado em aprender mais sobre isso.

\n

Extraindo Componentes com Chaves

\n

As chaves apenas fazem sentido no contexto do array que está encapsulando os itens.

\n

Por exemplo, se você extrai um componente ListItem, você deve deixar a chave nos elementos <ListItem /> ao invés de deixar no elemento <li> dentro de ListItem.

\n

Exemplo: Uso Incorreto de Chaves

\n
function ListItem(props) {\n  const value = props.value;\n  return (\n    // Errado! Não há necessidade de definir a chave aqui:    <li key={value.toString()}>      {value}\n    </li>\n  );\n}\n\nfunction NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n    // Errado! A chave deveria ser definida aqui:    <ListItem value={number} />  );\n  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);
\n

Exemplo: Uso Correto de Chaves

\n
function ListItem(props) {\n  // Correto! Não há necessidade de definir a chave aqui:  return <li>{props.value}</li>;}\n\nfunction NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n    // Correto! A chave deve ser definida dentro do array.    <ListItem key={number.toString()} value={number} />  );\n  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

Por via de regra, os elementos dentro de uma função map() devem especificar chaves.

\n

Chaves devem ser Únicas apenas entre Elementos Irmãos

\n

Chaves usadas nos arrays devem ser únicas entre seus elementos irmãos. Contudo elas não precisam ser únicas globalmente. Podemos usar as mesmas chaves ao criar dois arrays diferentes:

\n
function Blog(props) {\n  const sidebar = (    <ul>\n      {props.posts.map((post) =>\n        <li key={post.id}>          {post.title}\n        </li>\n      )}\n    </ul>\n  );\n  const content = props.posts.map((post) =>    <div key={post.id}>      <h3>{post.title}</h3>\n      <p>{post.content}</p>\n    </div>\n  );\n  return (\n    <div>\n      {sidebar}      <hr />\n      {content}    </div>\n  );\n}\n\nconst posts = [\n  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},\n  {id: 2, title: 'Installation', content: 'You can install React from npm.'}\n];\nReactDOM.render(\n  <Blog posts={posts} />,\n  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

As chaves servem como uma dica para o React. Mas elas não são passadas para os componentes. Se você precisar do mesmo valor em um componente, defina ele explicitamente como uma prop com um nome diferente:

\n
const content = posts.map((post) =>\n  <Post\n    key={post.id}    id={post.id}    title={post.title} />\n);
\n

No exemplo acima, o componente Post pode acessar props.id. Mas, não pode acessar props.key.

\n

Incluindo map() no JSX

\n

Nos exemplos acima declaramos uma variável listItems separada e adicionamos ela no JSX:

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>    <ListItem key={number.toString()}              value={number} />  );  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}
\n

O JSX permite incluir qualquer expressão dentro de chaves, então podemos adicionar o resultado do map() diretamente:

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  return (\n    <ul>\n      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />      )}    </ul>\n  );\n}
\n

Experimente no CodePen

\n

Às vezes isso resulta em um código mais limpo. Mas esse padrão também pode ser confuso. Como em JavaScript, depende de você decidir se vale a pena extrair uma variável para aumentar a legibilidade. Lembre-se que se o corpo da função map() tiver muitos níveis, poderá ser um bom momento para extrair um componente.

","frontmatter":{"title":"Listas e Chaves","next":"forms.html","prev":"conditional-rendering.html"},"fields":{"path":"content/docs/lists-and-keys.md","slug":"docs/lists-and-keys.html"}}},"pageContext":{"slug":"docs/lists-and-keys.html"}},"staticQueryHashes":[]}