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.

      #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>.