diff --git a/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500b41af8500191febedc.md index 9f4535a0f71..3805356ebca 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500b41af8500191febedc.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-data-in-react/673500b41af8500191febedc.md @@ -24,7 +24,21 @@ function FruitList() { In this example, the `map` function iterates over each item in the `fruits` array. For each fruit, it creates a new `li` element containing the fruit's name. The newly created array of `li` elements is then displayed inside the `ul` parent tags. -However, when rendering lists in React, it is important not to forget the `key` prop for each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list. +However, when rendering lists in React, it is important not to forget the `key` prop for each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list. + +If you forget the key, React will show a warning in the console, but it will not throw a fatal error. The application might still render and function, but you may encounter subtle bugs, especially when the list changes. These bugs can be difficult to debug because the UI might look correct initially. + +A common mistake is to use the array index as the key, like this: + +```jsx +{fruits.map((fruit, index) =>