Generate custom IDs for input in React

Question

How can I generate custom IDs for input without using any packages/moduls outside of React?

I found this example for unique keys using index, but as one user pointed out, while React documentation says you can do it that way:

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

It's not wise to use index for this. Is there any other way I could generate unique IDs with React? Thanks!

The answer in the example you shared talks about all possible solutions — Dennis Vash, Sep 11 '19 at 15:03
What's the need to reinvent the wheel? You can easily use [uuid - npm](https://www.npmjs.com/package/uuid) — Robert Todar, Sep 11 '19 at 15:04
I totally agree with the comments. But I will leave one option here just in case `(Math.random().toString(36) + Date.now().toString(36)).substr(2, 10);` — Ed C, Sep 11 '19 at 15:05

score 0 · Answer 1 · answered Sep 11 '19 at 15:06

In the react docs you link it's says: "We don’t recommend using indexes for keys if the order of items may change."

So if you change the orders in your array (like sorting them) and you haven't a unique propertie just give them one initial (when you create the array or directly after getting the array)

todos.forEach((todo, index) => todo.index = index);

Generate custom IDs for input in React

1 Answers1