Reagent React Clojurescript Warning: Every element in a seq should have a unique :key -


i have copied 2 year old gist here. working figwheel , uses more recent version of reagent/react. looking generic way of isolating warning message comes javascript console: warning: every element in seq should have unique :key. idea put :key generated unique value components. messages ought disappear , i'll in position see components needed unique :key. problem although unique :key being put of them, warning message still seen.

so - able tell me component have missed or otherwise i've done wrong? can see source (permalink) have added :key (gen-key) 2 components: [:polyline {:key (gen-key) ... , [:svg {:key (gen-key) ... @ lines 43 , 68 respectively.

edit answer (permalink), in terms of code anyway. placement of ^{:key (gen-key)} @ lines 44 , 60.

note function gen-key made debugging. natural keys replace.

this how might implement gen-key:

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

and here's way done in links above:

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

from example @ reagent project site

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

note: ^{:key item} part above isn’t necessary in simple example, attaching unique key every item in dynamically generated list of components practice, , helps react improve performance large lists. key can given either (as in example) meta-data, or :key item in first argument component (if map). see react’s documentation more info.

and react documentation on dynamic children should point in right direction. @ high level, if have code generates number of similar components in sort of loop, need prefix each component ^{:key val}. however, reagent needs things in vectors, typically need wrap output looping construct in other vector, such [:ul] in above example or [:div] in general case. use (into [:div] (for ....)) type of construct this.


Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -