coronaaqui / website

MIT License
8 stars 17 forks source link

Fix bugs with list and keys. #18

Open jeanbispo opened 4 years ago

jeanbispo commented 4 years ago

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 commented 4 years ago

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.