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.

      #thedivisor#Notice that all the sandboxes above show an error in the console:#thedivisor#You need to give each array item 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">key</code> — a string or a number that uniquely identifies it among other items in that array:#thedivisor#JSX elements directly inside 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">map()</code> call always need keys!#thedivisor#Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen <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">key</code> helps React infer what exactly has happened, and make the correct updates to the DOM tree.#thedivisor#Rather than generating keys on the fly, you should include them in your data:#thedivisor#What do you do when each item needs to render not one, but several DOM nodes?#thedivisor#The short <a 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" href="/reference/react/Fragment"><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;&gt;...&lt;/&gt;</code> Fragment</a> syntax won’t let you pass a key, so you need to either group them into a single <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;div&gt;</code>, or use the slightly longer and <a 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" href="/reference/react/Fragment#rendering-a-list-of-fragments">more explicit <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;Fragment&gt;</code> syntax:</a>#thedivisor#Fragments disappear from the DOM, so this will produce a flat list of <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;h1&gt;</code>, <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;p&gt;</code>, <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;h1&gt;</code>, <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;p&gt;</code>, and so on.#thedivisor#Different sources of data provide different sources of keys:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Data from a database:</strong> If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Locally generated data:</strong> If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID" 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">crypto.randomUUID()</code></a> or a package like <a href="https://www.npmjs.com/package/uuid" 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">uuid</code></a> when creating items.</li>#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Keys must be unique among siblings.</strong> However, it’s okay to use the same keys for JSX nodes in <em>different</em> arrays.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Keys must not change</strong> or that defeats their purpose! Don’t generate them while rendering.</li>#thedivisor#Imagine that files on your desktop didn’t have names. Instead, you’d refer to them by their order — the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.#thedivisor#File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the <em>position</em> changes due to reordering, 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">key</code> lets React identify the item throughout its lifetime.#thedivisor#You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify 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">key</code> at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.#thedivisor#Similarly, do not generate keys on the fly, e.g. with <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">key={Math.random()}</code>. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.#thedivisor#Note that your components won’t receive <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">key</code> as a prop. It’s only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: <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;Profile key={id} userId={id} /&gt;</code>.#thedivisor#On this page you learned:#thedivisor#<li class="leading-relaxed mb-1">How to move data out of components and into data structures like arrays and objects.</li>
<li class="leading-relaxed mb-1">How to generate sets of similar components with 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 create arrays of filtered items with 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">Why and how to set <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">key</code> on each component in a collection so React can keep track of each of them even if their position or data changes.</li>#thedivisor#This example shows a list of all people.#thedivisor#Change it to show two separate lists one after another: <strong class="font-bold">Chemists</strong> and <strong class="font-bold">Everyone Else.</strong> Like previously, you can determine whether a person is a chemist by checking if <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>.