Lists and Keys

First, let’s review how you transform lists in JavaScript.

• we use the map() function to take an array of numbers and double their values.
• We assign the new array returned by map() to the variable doubled and log it:

Rendering Multiple Components

• 1
• 2
• 3
• 4
• 5

Basic List Component

• 1
• 2
• 3
• 4
• 5

Keys

• Keys help React identify which items have changed, are added, or are removed.
• Keys should be given to the elements inside the array to give the elements a stable identity
• We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

• 1
• 2
• 3
• 4
• 5

Keys Must Only Be Unique Among Siblings

• Keys used within arrays should be unique among their siblings.
• They don’t need to be globally unique. We can use the same keys when we produce two different arrays

• 1
• 2
• 3
• 4
• 5