Hello developers! Welcome to this quick solution. When working with lists or sequences of components in React using the map() method, it's common to encounter an error message in the console that says, "Each child in an array should have a unique 'key' prop."

While this error doesn't affect the functionality of your code, it's best practice to keep your console clean and error-free.

In this guide, we'll learn how to resolve this issue in ReactJS. We'll cover two quick and effective ways to ensure each child in an array has a unique 'key' prop.

Let's start by addressing the problem directly. We'll take a look at the code shared by a developer who faced this issue.

Problem

import React from 'react'

function App() {

  const nav_link = [
    { path: "#home", display: "Home" },
    { path: "#about", display: "About" },
    { path: "#skills", display: "Skills" },
    { path: "#Contact", display: "Contact" }
  ]

  return (
    <div>
      <ul className="menu">
        {
          nav_link.map((item) => (
            <li className="nav_item"><a href={item.path}>{item.display}</a></li>
          ))
        }
      </ul>
    </div>
  );
}

export default App;

Solution

Way 1:

To fix the error, make sure each item in the list has a unique 'key' value. This 'key' helps React identify changes in the list.

• Just add a 'key={name}' to each list item:

Whenever we create a list of elements, it is necessary to define the 'key' attribute. It allows React to efficiently track which items have been updated, added, or removed. Assigning a key to each element within the array provides them with a stable identity.

Here's an example showing how to assign a 'key' to each item in a list:

import React from 'react'

function App() {

  const nav_link = [
    { path: "#home", display: "Home" },
    { path: "#about", display: "About" },
    { path: "#skills", display: "Skills" },
    { path: "#Contact", display: "Contact" }
  ]

  return (
    <div>
      <ul className="menu">
        {
          nav_link.map((item, Any_name) => (
            <li key={Any_name} className="nav_item"><a href={item.path}>{item.display}</a></li>
          ))
        }
      </ul>
    </div>
  );
}

export default App;

Way 2: 

To resolve this issue, manually assign a unique ID to each item in the array. Then, use this ID as the "key" prop for each element in the list item.

Here's an example of how you can do this:

import React from 'react'

function App() {

  const nav_link = [
    { id: 1, path: "#home", display: "Home" },
    { id: 2, path: "#about", display: "About" },
    { id: 3, path: "#skills", display: "Skills" },
    { id: 4, path: "#Contact", display: "Contact" }
  ]

  return (
    <div>
      <ul className="menu">
        {
          nav_link.map((item) => (
            <li key={item.id} className="nav_item"><a href={item.path}>{item.display}</a></li>
          ))
        }
      </ul>
    </div>
  );
}

export default App;

In the example above, we assign a unique ID to each item in the array manually. After assigning the ID, you don't need to specify the ID's name in the map() method. Instead, you can directly render the item and its ID using (item.id), as demonstrated in this example.

Make sure that each ID you assign to the array items should be unique. Using the same ID for multiple items will lead to an error.

In this solution, we have given you two choices to fix this problem. You can remove this type of error by selecting any of these two options.

For any more questions, just drop them in the question box given below, and you will get the answer soon.