In a nested map function in Render function in React, are values of key attribute need to be unique-CodePudding

According to the official documentation of React, key attributes are needed to let React know if any element in the array is added, removed, or modified. So supposed I have a nested for loop in a render function.

Supposed we have

parents.map((each, index)=>{
    return(
        <div key={index}>
             each.map((number, i)=>{
                 return <Child number={number} key={i} />
              }) 
        </div>     
    )
});

Both the parent div elements and the Child components have key attribute to identify them, and they are all in an array. However, do all the values of the key attributes among the div and the Child component need to be unique? None the less, they are from different loops. In case each item inside the parents array is also an array, and all of these arrays have a same length. Eventually, the "key" value will be duplicated, such as

const parents = [[1,2],[2,3]]

We will have

<div key={0}>
    <Child number={1} key={0} />
    <Child number={2} key={1} />
</div> 
<div key={1}>
    <Child number={2} key={0} />
    <Child number={3} key={1} />
</div>

CodePudding user response：

you need just unique keys in each map there is not any problem if your inner map elements have same keys. but elements of one map should not have keys.

please read this link: React Key uniqueness on different elements

CodePudding user response：

Hi @Rongeegee,

I read lots of articles about that when I was doing react. In my opinion, key in React should unique but not globally unique it should unique when you render child elements because it's to detect the state of your elements when you modify or delete or you change it. It's also useful to create dynamic elements, resetting elements when their keys change, it's actually all about to identity the elements which in turn leads to better performance. I'm not sure, but I see many times. You are not given the keys to React then, it uses by default the index in the array. That why lots of people like to use some package for key for uniqueness like uudi. Because when you change array elements it changes its key and value like 0:apple,1:pineapple then if you delete apple then it's look like this 0:pineapple

Also, I suggest you to read this discussion github-discussion-about-key

CodePudding user response：

In here You can do this kind of a thing. I change the code little bit and put in the sandbox.See the sandbox.Then you can play with the code.

I will put here the code here,if link broken,others can't view this.

export default function App() {
  let val = 0;
  const parents = [
    [1, 2],
    [2, 3]
  ];

  return (
    <div>
      {parents.map((each, index) => {
        val = val   1;
        return (
          <div key={val}>
            {val}
            {each.map((number, i) => {
              val = val   1;
              return <div key={val}> {val}</div>;
            })}
          </div>
        );
      })}
    </div>
  );
}