I already provide different key .Why it is giving me warning ? here is my code

<TableBody>
              {fetchData.map(([title, row], index) => {
                return (
                  <Fragment>
                    <TableRow key={index}>
                      <TableCell colSpan="2">{title}</TableCell>
                    </TableRow>
                    {row.map(({ displaytext, value }, i) => (
                      <TableRow key={index + i}>
                        <TableCell>{displaytext}</TableCell>
                        <TableCell>{value}</TableCell>
                      </TableRow>
                    ))}
                  </Fragment>
                );
              })}
            </TableBody>

I already provide different key .Why it is giving me warning ? here is my code https://codesandbox.io/s/0xvqw6159n

<TableBody>
              {fetchData.map(([title, row], index) => {
                return (
                  <Fragment>
                    <TableRow key={index}>
                      <TableCell colSpan="2">{title}</TableCell>
                    </TableRow>
                    {row.map(({ displaytext, value }, i) => (
                      <TableRow key={index + i}>
                        <TableCell>{displaytext}</TableCell>
                        <TableCell>{value}</TableCell>
                      </TableRow>
                    ))}
                  </Fragment>
                );
              })}
            </TableBody>

• javascript
• arrays
• reactjs

• index + i does not guarantee uniqueness. – kind user Commented Dec 8, 2018 at 11:31
• 1 You have duplicates. When index is 0 you create 0 + 0, 0 + 1, 0 + N and then index goes to 1 and you have 1 + 0 and so on... – Adriano Repetti Commented Dec 8, 2018 at 11:31
• please suggest better way – user5711656 Commented Dec 8, 2018 at 11:39
• codesandbox.io/s/0xvqw6159n I added one but still same error – user5711656 Commented Dec 8, 2018 at 11:40

3 Answers 3

First of all, you are setting the key at wrong line. Fragment does not render into HTML, however it requires the key prop.

<Fragment key={index}>
   <TableRow>

Secondly, I would suggest you to add an unique id to your nested properties, since index + i does not guarantee uniqueness.

index + i isn't unique for every value of index and i.

Let's say fetchData and row are both of length 2, so index and i will both count from 0 to 1.

key = index + i

index  i     key
0      0     0
0      1     1
1      0     1
1      1     2

This produces 1 twice, so the keys aren't unique. Converting to string would help:

key = String( index ) + String( i )

index  i     key
0      0     "00"
0      1     "01"
1      0     "10"
1      1     "11"

Or you can multiply by row.length to produce unique integers.

key = ( index * row.length ) + i

index  i     key
0      0     0
0      1     1
1      0     2
1      1     3

Are your title or display text unique? If so, you can use them as key props.

<TableBody>
          {fetchData.map(([title, row], index) => {
            return (
              <Fragment>
                <TableRow key={title}>
                  <TableCell colSpan="2">{title}</TableCell>
                </TableRow>
                {row.map(({ displaytext, value }, i) => (
                  <TableRow key={displaytext}>
                    <TableCell>{displaytext}</TableCell>
                    <TableCell>{value}</TableCell>
                  </TableRow>
                ))}
              </Fragment>
            );
          })}
</TableBody>