An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Add a unique id and use it as a key
Introduction
If you use Vue or React, you must know about keys. They are mostly used with lists such as
const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li>);
and in Vue:
<ul> <li v-for="todo in todos" :key="todo.id"> {{ item.text }} </li></ul>
Avoid using index as key
Both React and Vue advice against using the index as a key especially if the order of items may change. As if you want to allow users to reorder items.
// not recommended to use index as key<ul> <li v-for="(todo, index) in todos" :key="index"> {{ item.text }} </li></ul>
Sometimes we are lucky enough that our data comes with a unique id that identifies each of the items.
Other times, we are not so lucky. The items
don't have unique ids. Or they do, but we want to render the item more than once. In that case, if we use the id as a key, we will run into duplicate keys issue.
We will have to create unique ids for the items
and use them as keys.
Generate keys
There are many ways to do that. I will choose Lodash's uniqueId method since Lodash is used in the project I am working on and there is no need to load another library
import uniqueId from 'lodash/uniqueId';
Before rendering todos
, loop through it and add a uniquekey
todos.forEach((todo) => { todo.uniqueKey = uniqueId();});
Then, you can use todo.uniqueKey
as a key. uniqueId()
will generate a unique id for each todo. However, sometimes those ids might clash with other ids for a different list in the page. We can take it further and add an argument to uniqueId('todo_')
to avoid duplicate keys.
Final thoughts
This uniqueKey
was only added to do a particular job in the frontend. We probably wouldn't need to send it to the backend. So, before sending todos
to the backend, make sure to delete the uniqueKey
todos.forEach((todo) => { todo.uniqueKey && delete todo.uniqueKey;});
Thanks for reading
Original Link: https://dev.to/ahyagoub40/add-a-unique-id-and-use-it-as-a-key-312o
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To