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
Post a Comment