Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Conceitos, termos ou referências devem ser mantidas em inglês.
      3. Apenas transcreva o artigo, tornando ele mais literal e direto, para um português simples, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      You will often want to display multiple similar components from a collection of data. You can use the <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">JavaScript array methods</a> to manipulate an array of data. On this page, you’ll use <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">filter()</code></a> and <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">map()</code></a> with React to filter and transform your array of data into an array of components.#thedivisor#<li class="leading-relaxed mb-1">How to render components from an array using JavaScript’s <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">map()</code></li>
<li class="leading-relaxed mb-1">How to render only specific components using JavaScript’s <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">filter()</code></li>
<li class="leading-relaxed mb-1">When and why to use React keys</li>#thedivisor#Say that you have a list of content.#thedivisor#The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">map()</code></a> and <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">filter()</code></a> to render lists of components from them.#thedivisor#Here’s a short example of how to generate a list of items from an array: