How to create unique keys for React elements

Question

I am making a React app that allows you to make a list and save it  but React has been giving me a warning that my elements don t have a unique key prop  elements List ListForm   How should I create a unique key prop for user created elements  Below is my React code  var TitleForm   React createClass       handleSubmit  function e            e preventDefault            var listName     name  this refs listName value           this props handleCreate listName           this refs listName value                  render  function             return                lt div gt                   lt form onSubmit  this handleSubmit  gt                       lt input className  form-control list-input  type  text  ref  listName  placeholder  List Name   gt                       lt br  gt                       lt button className  btn btn-primary  type  submit  gt Create lt  button gt                   lt  form gt               lt  div gt                        var ListForm   React createClass       getInitialState  function             return  items    name   item1    itemCount 1              handleSubmit  function e            e preventDefault            var list     name   this props name   data               var items   this state items          for  var i   1  i  lt  items length  i                  list data push this refs items i  name                      this props update list                 this props name  remove                handleClick  function             this setState               items  this state items concat   name   item  this state itemCount 1                itemCount  this state itemCount 1                        handleDelete  function             this setState               itemCount  this state itemCount-1                        render  function             var listItems   this state items map function item                return                    lt div gt                       lt input type  text  className  list-form  placeholder  List Item  ref  item name   gt                       lt br  gt                   lt  div gt                                     return                lt div gt                   lt form onSubmit  this handleSubmit  className  well list-form-container  gt                       listItems                       lt br  gt                       lt div onClick  this handleClick  className  btn btn-primary list-button  gt Add lt  div gt                       lt div onClick  this handleDelete  className  btn btn-primary list-button  gt Delete lt  div gt                       lt button type  submit  className  btn btn-primary list-button  gt Save lt  button gt                   lt  form gt               lt  div gt                        var List   React createClass       getInitialState  function             return  lists     savedLists                  handleCreate  function listName            this setState               lists  this state lists concat listName                         updateSaved  function list            this setState               savedLists  this state savedLists concat list                         render  function             var lst   this          var lists   this state lists map function list                return                   lt div gt                       lt div key  list name  id  list name  gt                           lt h2 key   header  list name  gt  list name  lt  h2 gt                           lt ListForm update  lst updateSaved  name  list name   gt                       lt  div gt                   lt  div gt                                    var savedLists   this state savedLists map function list                var list data   list data              list data map function data                    return                        lt li gt  data  lt  li gt                                                return                   lt div gt                       lt h2 gt  list name  lt  h2 gt                       lt ul gt                           list data                       lt  ul gt                   lt  div gt                                    var save msg          if savedLists length    0               save msg    No Saved Lists            else              save msg    Saved Lists                     return                lt div gt                   lt TitleForm handleCreate  this handleCreate    gt                   lists                   lt h2 gt  save msg  lt  h2 gt                   savedLists               lt  div gt                       ReactDOM render  lt List  gt  document getElementById  app       My HTML    lt div class  container  gt       lt h1 gt Title lt  h1 gt       lt div id  app  class  center  gt  lt  div gt   lt  div gt

User · Answer

It is important to remember that React expects STABLE keys, meaning you should assign the keys once and every item on your list should receive the same key every time, that way React can optimize around your data changes when it is reconciling the virtual DOM and decides which components need to re-render. So, if you are using UUID you need to do it at the data level, not at the UI level.

Also keep in mind you can use any string you want for the key, so you can often combine several fields into one unique ID, something like ${username}_${timestamp} can be a fine unique key for a line in a chat, for example.

User · Answer

You can use react-html-id to generate uniq id easely   https   www npmjs com package react-html-id

User · Answer

Do not use this return     pre      new Date   getTime       It s better to have the array index instead of that because  even though it s not ideal  that way you will at least get some consistency among the list components  with the new Date function you will get constant inconsistency  That means every new iteration of the function will lead to a new truly unique key    The unique key doesn t mean that it needs to be globally unique  it means that it needs to be unique in the context of the component  so it doesn t run useless re-renders all the time  You won t feel the problem associated with new Date initially  but you will feel it  for example  if you need to get back to the already rendered list and React starts getting all confused because it doesn t know which component changed and which didn t  resulting in memory leaks  because  you guessed it  according to your Date key  every component changed    Now to my answer  Let s say you are rendering a list of YouTube videos  Use the video id  arqTu9Ay4Ig  as a unique ID  That way  if that ID doesn t change  the component will stay the same  but if it does  React will recognize that it s a new Video and change it accordingly   It doesn t have to be that strict  the little more relaxed variant is to use the title  like Erez Hochman already pointed out  or a combination of the attributes of the component  title plus category   so you can tell React to check if they have changed or not   edited some unimportant stuff

User · Answer

Keys helps React identify which items have changed added removed and should be given to the elements inside the array to give the elements a stable identity   With that in mind  there are basically three different strategies as described bellow    Static Elements  when you don t need to keep html state  focus  cursor position  etc  Editable and sortable elements Editable but not sortable elements    As React Documentation explains  we need to give stable identity to the elements and because of that  carefully choose the strategy that best suits your needs   STATIC ELEMENTS  As we can see also in React Documentation  is not recommended the use of index for keys  if the order of items may change  This can negatively impact performance and may cause issues with component state     In case of static elements like tables  lists  etc  I recommend using a tool called shortid   1  Install the package using NPM YARN   npm install shortid --save   2  Import in the class file you want to use it   import shortid from  shortid     2  The command to generate a new id is shortid generate     3  Example     renderDropdownItems       React ReactNode   gt        const   data  isDisabled     this props      const   selectedValue     this state      const dropdownItems  Array lt React ReactNode gt             if  data          data forEach item   gt            dropdownItems push             lt option value  item value  key  shortid generate    gt               item text             lt  option gt                                  return          lt select         value  selectedValue          onChange  this onSelectedItemChanged          disabled  isDisabled         gt           dropdownItems         lt  select gt                IMPORTANT  As React Virtual DOM relies on the key  with shortid every time the element is re-rendered a new key will be created and the element will loose it s html state like focus or cursor position  Consider this when deciding how the key will be generated as the strategy above can be useful only when you are building elements that won t have their values changed like lists or read only fields   EDITABLE  sortable  FIELDS  If the element is sortable and you have a unique ID of the item  combine it with some extra string  in case you need to have the same information twice in a page   This is the most recommended scenario   Example     renderDropdownItems       React ReactNode   gt        const elementKey string    ddownitem         const   data  isDisabled     this props      const   selectedValue     this state      const dropdownItems  Array lt React ReactNode gt             if  data          data forEach item   gt            dropdownItems push             lt option value  item value  key    elementKey   item id   gt               item text             lt  option gt                                  return          lt select         value  selectedValue          onChange  this onSelectedItemChanged          disabled  isDisabled         gt           dropdownItems         lt  select gt                EDITABLE  non sortable  FIELDS  e g  INPUT ELEMENTS   As a last resort  for editable  but non sortable  fields like input  you can use some the index with some starting text as element key cannot be duplicated    Example     renderDropdownItems       React ReactNode   gt        const elementKey string    ddownitem         const   data  isDisabled     this props      const   selectedValue     this state      const dropdownItems  Array lt React ReactNode gt             if  data          data forEach  item any index number    gt            dropdownItems push             lt option value  item value  key    elementKey   index   gt               item text             lt  option gt                                  return          lt select         value  selectedValue          onChange  this onSelectedItemChanged          disabled  isDisabled         gt           dropdownItems         lt  select gt                Hope this helps

User · Answer

To add the latest solution for 2021    I found that the project nanoid provides unique string ids that can be used as key while also being fast and very small  After installing using npm install nanoid  use as follows  import   nanoid   from  nanoid       Have the id associated with the data  const todos     id  nanoid    text   first todo         Then later  it can be rendered using a stable id as the key  const todoItems   todos map  todo    gt     lt li key  todo id  gt       todo text     lt  li gt

User · Answer

There are many ways in which you can create unique keys  the simplest method is to use the index when iterating arrays   Example      var lists   this state lists map function list  index            return               lt div key  index  gt                   lt div key  list name  id  list name  gt                       lt h2 key   header  list name  gt  list name  lt  h2 gt                       lt ListForm update  lst updateSaved  name  list name   gt                   lt  div gt               lt  div gt                      Wherever you re lopping over data  here this state lists map  you can pass second parameter function list  index  to the callback as well and that will be its index value and it will be unique for all the items in the array   And then you can use it like   lt div key  index  gt   You can do the same here as well      var savedLists   this state savedLists map function list  index            var list data   list data          list data map function data  index                return                    lt li key  index  gt  data  lt  li gt                                    return               lt div key  index  gt                   lt h2 gt  list name  lt  h2 gt                   lt ul gt                       list data                   lt  ul gt               lt  div gt                      Edit  However  As pointed by the user Martin Dawson in the comment below  This is not always ideal   So whats the solution then   Many   You can create a function to generate unique keys ids numbers strings and use that You can make use of existing npm packages like uuid  uniqid  etc You can also generate random number like new Date   getTime    and prefix it with something from the item you re iterating to guarantee its uniqueness Lastly  I recommend using the unique ID you get from the database  If you get it    Example   const generateKey    pre    gt        return     pre      new Date   getTime          const savedLists   this state savedLists map  list   gt        const list data   list data map  data   gt   lt li key   generateKey data    gt   data   lt  li gt         return           lt div key   generateKey list name    gt               lt h2 gt   list name   lt  h2 gt               lt ul gt                    list data                lt  ul gt           lt  div gt

User · Answer

I am using this    lt div key   new Date     Math random    gt

[reactjs] How to create unique keys for React elements?

Examples related to reactjs