Each child in an array or iterator should have a unique "key" prop. in react js?

Question

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>

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
– Adriano Repetti, Commented Dec 8, 2018 at 11:31
codesandbox.io/s/0xvqw6159n I added one but still same error — user5711656
– user5711656, Commented Dec 8, 2018 at 11:40

kind user · Accepted Answer · 2018-12-08 11:47:30Z

22

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.

answered Dec 8, 2018 at 11:47

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben West · Accepted Answer · 2018-12-08 11:55:00Z

0

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

answered Dec 8, 2018 at 11:55

Ben West

4,5861 gold badge19 silver badges17 bronze badges

Comments

Slawomir Wozniak · Accepted Answer · 2018-12-08 17:00:04Z

0

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>

answered Dec 8, 2018 at 17:00

Slawomir Wozniak

5416 silver badges16 bronze badges

Collectives™ on Stack Overflow

Each child in an array or iterator should have a unique "key" prop. in react js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related