Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos 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:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Move</strong> the data into an array:</li>#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Map</strong> the <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">people</code> members into a new array of JSX nodes, <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">listItems</code>:</li>#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Return</strong> <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">listItems</code> from your component wrapped in a <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">&lt;ul&gt;</code>:</li>#thedivisor#Here is the result:#thedivisor#Notice the sandbox above displays a console error: