Each child in a list should have a unique “key” prop: How to fix React error?

Hey readers! 👋 While learning to react, one thing I notice is that whenever I am using the map() function, I was getting an error that “each child in a list should have a unique key prop”. I didn’t understand it at first but after getting my heads-up about finding the solution.

I had to browse a lot of documentation and refer to the code to understand much better after learning the reason and what is exactly the error meant, this gave me a great understanding about react and its functionalities.

In this blog, I am going to share my knowledge with you and I’ll try o explain the error in a simple manner that will save you a lot of time you don’t need any sort of more explanation about this topic after reading this blog. I am also going to explain to you how to fix this error as well ( this goes without saying)👀

What is a key in react?🤔

Key helps react to find which items in an array have changed or added or removed. In react key determines which elements inside this array should be given to create a stable identity. It helps the virtual DOM in understanding better about your code and executes it accordingly.

It acts as a special key attribute that identifies items in lists of elements and performs operations based on keys. The idea behind the key is to nullify and provide unique attributes to the lists or arrays. The best way to pick up a key is to use a string that uniquely lists items among its siblings. The important point about key props is that they are not accessible in the child components

How to fix the error? 😤

Now we understood the key in react, but still, we didn’t solve the error, unique key prop. So let’s get started.

Row in the JS array should have a unique key property and it helps ReactJs to find the reference to the appropriate DOM nodes and update only content inside them and not re-render the entire table or row.

Here we are looping through the string of the array using the map method function that is present in javascript. We return a list i.e li element for each array item, and finally, assign the return element to the listItem name function. Then it includes the entire listItems function in an array into the un-ordered list i.e ul element and renders it to the DOM.

function App() {
    // list of object of strings
        const abouts = [{text:'codedamn is'}, {text:'awesome'}, {text:'platform'},
        {text:'to learn'}, {text:'Full stack Development'}]
    // assigning to listItems and it will map it
    const listItems = abouts.map((about)=>
     <li>{about}</li>
    );
  return (
    //   rendering the elemnt in unorder list
    <div className="App">

      <ul>{listItems}</ul>
    </div>
  );
}
export default App;
Code language: JavaScript (javascript)

The above code creates the bullet list of the strings that are present in the array. Here is the output of the above code.

But when you see the console, you will get an error. Why this happens you are already aware of it, but knowing the error is not going to solve it, so let’s solve this confusing error.

There are two methods to solve this issue and we are going to see both of them.

First Method

The first method of solving this problem is you need to just go to the listItems, inside the map() function argument that is present in the listItems, and add i after the about argument. Inside the returning in the same function add a key attribute in the list tag (li) and pass with a curly bracket i in the brackets. Same like mention below:

const listItems = abouts.map((about, i)=>
     <li key={i}>{about}</li>
    );Code language: JavaScript (javascript)

After making changes, saving, and running the code, you will see the error is gone and it is going to work properly.

This key is a unique id, that we are referencing over in the code, it is the unique id that react wants to have in an array.

key = {i}Code language: JavaScript (javascript)

Second Method

Another way of solving this problem is by manually having a unique id in each array item itself. So let’s take the previous example only, but in this one, we are going to add it manually to each list of objects present in the array.

// here we are adding id to each of the text present here.
const abouts = [{id:1,text:'codedamn is'}, 
{id:2,text:'awesome'}, {id:3, text:'platform'},
{id:4,text:'to learn'}, 
{id:5, text:'Full stack Development'}]Code language: JavaScript (javascript)

By giving a unique key manually, it gives you control to take id and positioned them according to your requirements.

In the key attribute, you just need to give and pass the id in the key parameter. By removing the id from the map function argument, you just need to pass it once. Just as shown below.

// this will assign key manually to every string
const listItems = abouts.map((about)=>
     <li key={about.id}>{about.text}</li>
    );Code language: JavaScript (javascript)

Instead of giving the index as a unique id, we are having our own id over the second method but the fact is that you need to give this id unique because if you give the same id to every item present in the list it will obviously throw you an error. The id for each item in the array should be unique.

After making the changes, saving, and running the code the error still will not be there.

When using and don’t have IDs in the data for rendering a list of items, you can use the index in contrast to the actual read IDs i.e first type but only as a last option. The index can break your code into the DOM (document object model) and this can result in negative points. Due to this factor, there is a performance issue also with component states.

If you choose not to assign explicitly any key to list items then react will automatically choose indexes as keys.

Conclusion

It is really simple to understand the key prop error, I have shown you two ways to solve the issue, one is by using the index i.e i and key equal to i and another one is like having a unique id for each item in an array itself.

So I hope you find this blog useful and your error is resolved now, if you have any query or suggestion related to this topic, let me know in the comment section or ask in a codedamn discord community. Have great learning!😊