How do I generate a unique key for each item in a list in React?

Question

I'm making a simple To Do list in React and even though I have a key property, I am still getting the error "Each child in a list should have a unique "key" prop.".

Here is my JSX:

 <div className="list">
          <ul>
          {updatedList.map((item, index) => {
            return (
            <div>
              <li key={index}>{item}</li><button>delete</button>
            </div>
            )
          })}
          </ul>
        </div>

Is the index of my updatedList not enough for a key value? How would I go about appending something like "li_ + {index}" to each key?

What does `updatedList` array looks like here? You must be having an `id` for each todo item in that array, right? — palaѕн, May 06 '20 at 16:23

score 1 · Answer 1 · edited May 06 '20 at 18:29

1

I would suggest to not use the index as key for your todo app. Chances are you will delete a certain item from your todo list. This will mess up your UI if you use index as a key. You can create a function like generateID() which returns you a unique key. You can use something like Math.random() or Date Api or combination of both for unique key generation.

edited May 06 '20 at 18:29

The Fool

16,715
5
52
86

answered May 06 '20 at 16:31

Lakshya Thakur

8,030
1
12
39

I worked with this, and when generate random 1000 items, i got duplicate id – Adrian Romero May 08 '20 at 14:49
I can give you something that works way more random. But I think you should just add a id key to your item object. So you can have an item with this structure :- {id:'1',content:"do this"}. This will much better because even if you delete an item with id,say, "2", it's not ambigious to React which is in the case of index, where if you deleted item at 2nd index, then the 3rd item would be next time at 2nd index and React mess up. – Lakshya Thakur May 08 '20 at 15:44

score -1 · Answer 2 · answered May 06 '20 at 16:24

-1

You need to assign the key property to the parent container. On the root element.

<div className="list">
  <ul>
    {updatedList.map((item, index) => {
      return (
        <div key={index}>
          <li>{item}</li><button>delete</button>
        </div>
      )
    })}
  </ul>
</div>

answered May 06 '20 at 16:24

Varun Sharma

206
1
9

3

Using index is an awful idea. What happens when you remove an item from the array? – The Fool May 06 '20 at 16:28
If you remove an item from the array, it will rerender the stuff. Apart from this brother you asked for the error and this was the error. Event react documentation tells the same thing. – Varun Sharma May 07 '20 at 04:36

score -2 · Answer 3 · answered May 06 '20 at 16:23

-2

       <div key={index}>
          <li >{item}</li><button>delete</button>
        </div>

Key should be on the first node

answered May 06 '20 at 16:23

Ashwani

692
2
6
16

score -2 · Answer 4 · answered May 06 '20 at 16:25

You can use a tree techinque, like as

 <div id="A" className="list">
      <ul id="B" >
      {updatedList.map((item, index) => {
        return (
        <div>
          <li key={'A'+'B'+index}>{item}</li><button>delete</button>
        </div>
        )
      })}
      </ul>
    </div>

score -3 · Answer 5 · answered May 06 '20 at 16:24

It still marks the error because you're putting the key tag not on the root element, but on li which is a child of div, while you should put it on the div element.

 <div className="list">
          <ul>
          {updatedList.map((item, index) => {
            return (
            <div key={index}>
              <li>{item}</li><button>delete</button>
            </div>
            )
          })}
          </ul>
        </div>
``\

How do I generate a unique key for each item in a list in React?

5 Answers5