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 para português brasileiro, dentro de seu 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:#thedivisor#You’ll learn how to fix this error later on this page. Before we get to that, let’s add some structure to your data.#thedivisor#This data can be structured even more.#thedivisor#Let’s say you want a way to only show people whose profession is <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">'chemist'</code>. You can use 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> method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns <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">true</code> or <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">false</code>), and returns a new array of only those items that passed the test (returned <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">true</code>).#thedivisor#You only want the items where <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">profession</code> is <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">'chemist'</code>. The “test” function for this looks like <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">(person) =&gt; person.profession === 'chemist'</code>. Here’s how to put it together:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Create</strong> a new array of just “chemist” people, <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">chemists</code>, by calling <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> on 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> filtering by <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">person.profession === 'chemist'</code>:</li>#thedivisor#<li class="leading-relaxed mb-1">Now <strong class="font-bold">map</strong> over <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">chemists</code>:</li>#thedivisor#<li class="leading-relaxed mb-1">Lastly, <strong class="font-bold">return</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">listItems</code> from your component:</li>#thedivisor#Arrow functions implicitly return the expression right after <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">=&gt;</code>, so you didn’t need 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">return</code> statement:#thedivisor#However, <strong class="font-bold">you must write <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">return</code> explicitly if your <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">=&gt;</code> is followed by 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">{</code> curly brace!</strong>#thedivisor#Arrow functions containing <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">=&gt; {</code> are said to have a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body" 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">“block body”.</a> They let you write more than a single line of code, but you <em>have to</em> write 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">return</code> statement yourself. If you forget it, nothing gets returned!