Each child in a list should have a unique "key" prop while using uuid

Question

I have a recursive component which is maping over rows and columns so the indexes might be repeated if I used the index of each map function. Instead I used the package uuid and used v4() as a key everywhere but still getting error:

  import { v4 } from "uuid";

 //....allcode before return 
        return (
          <>
            <Table.Header key={v4()} fullWidth>
              <Table.Row
                columns={size(Object.keys(data?.records[0]?.data)) + 2}
                key={v4()}
              >
                <Table.HeaderCell key={v4()}></Table.HeaderCell>
                {Object.keys(data?.records[0]?.data).map((key, ind) => {
                  return <Table.HeaderCell key={v4()}>{key}</Table.HeaderCell>;
                })}
                <Table.HeaderCell key={v4()}></Table.HeaderCell>
              </Table.Row>
            </Table.Header>
    
            {data?.records.map((firstLevel, ind1) => {
              return (
                <>
                  <Table.Body key={v4()}>
                    {/* here we render each row of data  */}
                    <Table.Row key={v4()}>
                      {size(firstLevel.kids) > 0 ? (
                        <Table.Cell key={v4()}>
                          <Icon
                            name="caret right"
                            link
                            size="large"
                            rotated={
                              show[ind1 + depth * 1000] ? "clockwise" : undefined
                            }
                            onClick={() => toggleShow(ind1, depth)}
                          />
                        </Table.Cell>
                      ) : (
                        <Table.Cell key={v4()}></Table.Cell>
                      )}
    
                      {Object.keys(firstLevel.data).map((key) => {
                        return (
                          <Table.Cell key={v4()}>{firstLevel.data[key]}</Table.Cell>
                        );
                      })}
                      <Table.Cell key={v4()}>
                        <Icon
                          name="close"
                          link
                          size="large"
                          onClick={() => removeData(ind1, depth, indArrayState)}
                        />
                      </Table.Cell>
                    </Table.Row>
                  </Table.Body>
    
                  {show[ind1 + depth * 1000] && size(firstLevel.kids) > 0 ? (
                    <>
                      {indArray.splice(depth, 1, ind1)}
    
                      <Table.Header key={v4()} fullWidth>
                        <Table.Row key={v4()}>
                          <Table.HeaderCell key={v4()}>
                            {Object.keys(firstLevel.kids)}
                          </Table.HeaderCell>
                        </Table.Row>
                      </Table.Header>
                      <RecursiveTable
                        data={firstLevel.kids[Object.keys(firstLevel.kids)[0]]}
                        allData={allData}
                        depth={depth + 1}
                        setAllData={setAllData}
                        indArray={indArray}
                      />
                    </>
                  ) : null}
                </>
              );
            })}
          </>
        );
    }

Any Idea?

Thank you.

Stackoverflow:It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.

Please don't circumvent the posting restrictions by adding useless text... — Brian Thompson, Jun 17 '21 at 13:21
Also using a uuid for the `key` that is generated each render is a really bad anti-pattern. You'd be better off using the array index (I'm aware that React only recommends this as a last resort, but its way better then this) — Brian Thompson, Jun 17 '21 at 13:22
Check [this answer](https://stackoverflow.com/questions/29808636/when-giving-unique-keys-to-components-is-it-okay-to-use-math-random-for-gener) for more details on why this is an anti-pattern. I would very much encourage you to read through this answer and understand the *why*. If you continue to use the uuid you wont get the warning, but you will take a performance hit and potentially run into bugs in the future. — Brian Thompson, Jun 17 '21 at 13:26
Is it also a bad idea to use uuid when using recursive functions or I could use map índex anyway? — Makogo12, Jun 17 '21 at 14:54
The *key* to a good `key` is **stability** and **uniqueness**. You want something that can uniquely identify a component *across* renders. There are pitfalls to using the array index, but not always. An array index is stable as long as the order of the elements does not change and you only remove items from the end. Otherwise the key loses its uniqueness.. A uuid is very unique, but by creating a new uuid each render it loses its stability.. Both can lead to bugs and poor performance. However, a new uuid each render will never work perfectly, while an array index can in some cases be just fine — Brian Thompson, Jun 17 '21 at 15:30

score 1 · Accepted Answer · answered Jun 17 '21 at 13:14

It looks like you are missing a key on a React Fragment. You could replace <> with <React.Fragment> and do something like the following:

data?.records.map((firstLevel, ind1) => {
   return (
      <React.Fragment key={x}>
        ...
      </React.Fragment>>

Reference

Each child in a list should have a unique "key" prop while using uuid

1 Answers1