From the course: Learning Full-Stack JavaScript Development: MongoDB, Node, and React

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

React’s key for items in a list

React’s key for items in a list

From the course: Learning Full-Stack JavaScript Development: MongoDB, Node, and React

Start my 1-month free trial Buy for my team

React’s key for items in a list

“

- [Instructor] Let's now talk about that error in the consult that you see. Each child in a list should have a unique key prop. This is a React requirement. Every time we render a list like this dynamically we need to tell React what identifies an element in the list. React uses this unique identifier of an element to optimize the rendering of this list when things are updated. So for example, assume that we have the capability of drag and drop here, we can reorder the list. We're not going to do that. This is just an example to understand this key prop. If we can drag and drop these lists react will re-render them right without an ID. React will not know what is being dragged and dropped and will most likely need to re-render the entire list. But with an ID, react can say, Oh you took the second element and placed it on a third. So it can optimize the re-rendering here because now it knows what is going on. We specify…

Contents