This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-08-11
Channels
- # admin-announcements (36)
- # beginners (1)
- # boot (267)
- # cider (19)
- # cljs-dev (12)
- # clojure (149)
- # clojure-austin (4)
- # clojure-canada (1)
- # clojure-czech (3)
- # clojure-dev (31)
- # clojure-japan (2)
- # clojure-uk (22)
- # clojurebridge (3)
- # clojurescript (314)
- # clojutre (18)
- # core-async (8)
- # cursive (4)
- # datascript (1)
- # datomic (27)
- # editors (2)
- # events (80)
- # hoplon (13)
- # javascript (2)
- # jobs (5)
- # ldnclj (12)
- # ldnproclodo (1)
- # off-topic (4)
- # re-frame (21)
- # reagent (87)
- # testing (13)
When you have a page that depends on data from the server and the data is being loaded, what do you do? Do you display a blank page until that happens?
i am getting "Warning: Every element in a seq should have a unique :key" but as far as i can see all elements have a "data-reactid" attribute , why am i getting this warning?
Search for :key in https://reagent-project.github.io/
I think it’s referring to that. But I’m not 100% sure.
@pupeno: i am using a key for all my elements , which is why i dont understand this warning
Don’t know then 😞
<thead data-reactid=".0.2.0"><tr data-reactid=".0.2.0.$head"></tr><tr data-reactid=".0.2.0.1"></tr><tr data-reactid=".0.2.0.2"><th data-reactid=".0.2.0.2.0">ID</th><th data-reactid=".0.2.0.2.1">Name</th><th data-reactid=".0.2.0.2.2">Description</th></tr></thead>
Warning: Every element in a seq should have a unique :key (in ui$uicore$project_table). Value: ([:th "ID"] [:th "Name"] [:th "Description"])
@roberto: i read th epost as we as many other that say that keys are important , but i dont see how it translates to html , and what is wrong in my specific use case
<tr data-reactid=".0.2.1.$55c9ee1544ae9af302eaf528"><td data-reactid=".0.2.1.$55c9ee1544ae9af302eaf528.0:0">55c9ee1544ae9af302eaf528</td><td data-reactid=".0.2.1.$55c9ee1544ae9af302eaf528.0:1">t2</td><td data-reactid=".0.2.1.$55c9ee1544ae9af302eaf528.0:2">t22</td><td data-reactid=".0.2.1.$55c9ee1544ae9af302eaf528.1"><button type="button" class="btn btn-danger" data-reactid=".0.2.1.$55c9ee1544ae9af302eaf528.1.0"><span class="glyphicon glyphicon-remove" data-reactid=".0.2.1.$55c9ee1544ae9af302eaf528.1.0.0"></span></button></td></tr>
its a unique id generated by map function , in the line above its 55c9ee1544ae9af302eaf528
(map (fn [entity] [:tr {:key (:_id entity)} (map (fn [key-name] [:td (key-name entity)]) key-name-vector)
Are you sure you are looking in the right place. The warning talks about the seq ([:th "ID"] [:th "Name"] [:th "Description"])
Note, that's a list
Containing 3 items, which don't have a key
@mikethompson: so tds also need an id
React gets worried about any sequence
Just to be clear: the critical thing here is that you are giving a sequence
a list
So this will cause a warning:
(let [s '([:th "ID"] [:th "Name"] [:th "Description"])]
[:tr s]) ;; <-- s is a sequence
but this won't ....
(let [s '([:th "ID"] [:th "Name"] [:th "Description"])]
(into [:tr] s)) ;; <-- s is a sequence BUT it is never given (as a prop) to reagent/React
Does that make sense?
@mikethompson: i think so .... ill look over my code further
Just to be clear about that 2nd example (with the into
). it is the equivalent of giving reagent:
[:tr [:th "ID"] [:th "Name"] [:th "Description"]]
This is different to giving reagent:
[:tr s]
where s is a sequence
When reagent/React see a sequence (a list) they want all the items to have a key
what about the data-reacid attribute is that not the unique key , as mentioned was mentioned above , it seems to be auto generated and is unique
keys end up looking like this:
0.1.22.43.5
and the key for a sibling might look like this:
0.1.22.43.6
Notice they they both share 43
That's because that's a part of their (shared) parent's key
The bit at the very end .5
or .6
related to these siblings
That's where there should be a difference
:key
only needs to be unique among siblings
It will be appended to the :key
for the parent
separated by "."
so in this example :<thead data-reactid=".0.2.0"><tr data-reactid=".0.2.0.$head"></tr><tr data-reactid=".0.2.0.1"></tr><tr data-reactid=".0.2.0.2"><th data-reactid=".0.2.0.2.0">ID</th><th data-reactid=".0.2.0.2.1">Name</th><th data-reactid=".0.2.0.2.2">Description</th></tr></thead>
Not sure. Too tired to parse
But the approach decribed above is roughly how it works
@mikethompson: k tx, ill try it out