Reagent React Clojurescript Warning: each element in seq must have a unique key:

Question

I copied two years ago from here . He currently works with Figwheel and uses a newer version of Reagent / React. I am looking for a general way to isolate this warning message that comes to the Javascript console: Warning: Every element in a seq should have a unique :key . The idea is to put :key with a unique value generated in all components. Then the messages should disappear, and I will be able to see which components need a unique :key . My problem is that even though they all enter a unique :key , a warning message is still visible.

So - can anyone tell me which component I missed, or else what I did wrong? As you can see from source (permalink) , I added :key (gen-key) to two components: [:polyline {:key (gen-key) ... and [:svg {:key (gen-key) ... on lines 43 and 68, respectively.

Edit So this is answer (permalink) in terms of code. Just find the location ^{:key (gen-key)} on lines 44 and 60.

Note that the gen-key function was created for debugging. Natural keys for replacement.

Here is how you could implement gen-key :

 (defn gen-key [] (gensym "key-")) 

And here is the path made in the links above:

 (def uniqkey (atom 0)) (defn gen-key [] (let [res (swap! uniqkey inc)] (u/log res) res)) 

Answer 1

In the example on the Reagent project website

 (defn lister [items] [:ul (for [item items] ^{:key item} [:li "Item " item])]) (defn lister-user [] [:div "Here is a list:" [lister (range 3)]]) 

Note. The element ^ {: key element} above is not needed in this simple example, but attaching a unique key to each element in a dynamically created list of components is good practice and helps to respond to performance improvements for large lists. The key can be given either (as in this example) as metadata, or as: the key element in the first argument to the component (if it is a map). See Response for more information.

and respond to documentation for dynamic children should point you in the right direction. At a high level, if you have code that generates several similar components in some kind of loop, you need to prefix each component with ^{:key val} . However, since the reagent needs the objects to be in the vectors, you usually need to wrap the output from the loop structure in some other vector, for example, in [:ul] in the above example, or in [:div] in the general case . I sometimes use a construct like (into [:div] (for ....)) for this.

Answer 2

I believe that you need to put the key: as metadata, for example, for example.

 ^{:key (gen-key)} [:polyline ... 

I think that it can only be added as a write to the map for components, as you are here:

 [trending-app {:key (gen-key) :state-ref paths-ratom :comms ch}] 

So the above works, but not, for example,

 [:svg {:key (gen-key)