Skip to content

Comments

Fix bugs with list and keys.#18

Open
jeanbispo wants to merge 1 commit intocoronaaqui:masterfrom
jeanbispo:fix/fix_bugs_lists_and_keys
Open

Fix bugs with list and keys.#18
jeanbispo wants to merge 1 commit intocoronaaqui:masterfrom
jeanbispo:fix/fix_bugs_lists_and_keys

Conversation

@jeanbispo
Copy link

Issue: #17

It's ok.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

It's not ok

// Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>

@isaquediasm
Copy link
Contributor

Issue: #17

It's ok.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

It's not ok

// Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>

@jeanbispo Could you please help to understand the exact issue here? They are both wrapper components and the key is used as the element is being generated by a looped array, or am I missing something?

I generally avoid using array indexes as key, especially for lists in which the order might change, but at the same time, I agree that a stringified object might cause performance overhead when used as a key.

Pls, lemme know if there's any detail I might be missing out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants