Why you should use the key prop in react.

This article assumes that you have understanding of javascript and basic ReactJs.

Why use the "key" prop?

1. It helps react identify the items in a list.
2. It gives each element in a list a unique identity.

What values can the key prop have?

1. Id - It is advisable to give each elements in a list an id to identify it. This should be used as the value of the key. The code snippet below is an example of how the id is used. ``` const Collections = [ {"id": 1, "text": "Hello"}, {"id": 2, "text":'World"} ] const div = () => { return(

    <div>
        {
        Collections.map((items, id) => {
            return(<p>items[id].text</p>)
        }
    }
    </div>
   

   ) }

export default Collections; ```

The above is an implementation of the key prop using an html element. It is quite different with react components.

1. Index (i)- In cases where the elements in the list doesn't have an id, the index can be used. Although, using the index of the element causes major drawbacks in overall performance. Why? When the index is used, if an element gets deleted, React will not know which is which and thus it will have to rerender the page(of course, you know what that means with respect to overall performance). In summary, the key prop lets elements in a list have a stable identity. The preferred value for a key prop is the unique id of the elements in a list.

Let me know if this helped you. Follow on twitter Omoteniola-dev