Fork me on GitHub
#reagent
<
2015-08-11
>
Pablo Fernandez11:08:50

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?

shaym12:08:34

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?

Pablo Fernandez12:08:00

I think it’s referring to that. But I’m not 100% sure.

shaym12:08:55

@pupeno: i am using a key for all my elements , which is why i dont understand this warning

Pablo Fernandez13:08:08

Don’t know then 😞

roberto13:08:15

@shaym post the snippet

roberto13:08:29

you should add a key attribute to each element, it is a react thing

shaym13:08:25

@roberto: but there is a data-reactid for each element , for example

roberto13:08:29

that is not the key

shaym13:08:44

[:tr {:key "head"}[:h3 heading]]

shaym13:08:36

<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>

shaym13:08:54

Warning: Every element in a seq should have a unique :key (in ui$uicore$project_table). Value: ([:th "ID"] [:th "Name"] [:th "Description"])

roberto13:08:19

that is not a unique key

shaym13:08:29

@roberto: it looks like :key translated to data-reactid

roberto13:08:36

read the post

shaym13:08:44

@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

shaym13:08:00

as you see above [:tr] does have a key

roberto13:08:04

it is not unique

roberto13:08:21

all the rows will have the same key “head"

shaym13:08:39

on other rows i set the _ id as key

shaym13:08:04

<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>

roberto13:08:20

what is the actual code?

shaym14:08:27

[:tr {:key _id} [:td id] {:td name] [:td descrip]]

roberto14:08:54

hmmm, what is _id ?

shaym14:08:41

its a unique id generated by map function , in the line above its 55c9ee1544ae9af302eaf528

roberto14:08:57

that is not unique

roberto14:08:00

it seems to be the same value

roberto14:08:09

would be much clearer if you showed the code

shaym14:08:52

(map (fn [entity] [:tr {:key (:_id entity)} (map (fn [key-name] [:td (key-name entity)]) key-name-vector)

shaym14:08:12

entity is map with unique id , name , descrip

shaym14:08:30

there is another map function that iterates over a vector of entities

shaym14:08:41

the _ids are for sure unique

shaym14:08:04

and as far as i can see the :key gets translated to a version of data-reactid

shaym14:08:19

for example data-reactid=".0.2.1.$55c9ee1544ae9af302eaf52

roberto14:08:43

55c9ee1544ae9af302eaf528 is the same for all of them

roberto14:08:48

I assume that is the _id

roberto14:08:00

forget about data-reactid

shaym14:08:03

yes thats the id

roberto14:08:04

make sure that _id is unique

antishok14:08:22

your tr's has :key but your td's don't

shaym14:08:22

where do you see that string repeated in the html?

shaym14:08:32

true the tds dont have it

roberto14:08:05

I don’t think the tds need it

roberto14:08:08

but you can try

mikethompson14:08:10

Are you sure you are looking in the right place. The warning talks about the seq ([:th "ID"] [:th "Name"] [:th "Description"])

mikethompson14:08:22

Note, that's a list

shaym14:08:29

the warning sows for all TRs

mikethompson14:08:40

Containing 3 items, which don't have a key

shaym14:08:43

including the head and the others

shaym14:08:08

@mikethompson: so tds also need an id

mikethompson14:08:38

React gets worried about any sequence

shaym14:08:47

but trying it now

mikethompson14:08:28

Just to be clear: the critical thing here is that you are giving a sequence

mikethompson14:08:32

So this will cause a warning:

(let  [s   '([:th "ID"] [:th "Name"] [:th "Description"])]
     [:tr s])     ;;  <--  s is a sequence

mikethompson14:08:48

but this won't ....

mikethompson14:08:22

(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

mikethompson14:08:08

Does that make sense?

shaym14:08:58

@mikethompson: i think so .... ill look over my code further

mikethompson14:08:34

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"]]

mikethompson14:08:16

This is different to giving reagent: [:tr s] where s is a sequence

mikethompson14:08:54

When reagent/React see a sequence (a list) they want all the items to have a key

shaym14:08:21

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

shaym14:08:58

*as was mentioned above

mikethompson14:08:01

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

mikethompson14:08:13

Notice they they both share 43

shaym14:08:35

yep i saw that

mikethompson14:08:43

That's because that's a part of their (shared) parent's key

mikethompson14:08:09

The bit at the very end .5 or .6 related to these siblings

mikethompson14:08:20

That's where there should be a difference

shaym14:08:46

so the whole string is not the key , the string is is "path" from parent to child

mikethompson14:08:20

:key only needs to be unique among siblings

mikethompson14:08:53

It will be appended to the :key for the parent

mikethompson14:08:10

separated by "."

shaym14:08:40

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>

shaym14:08:14

3 sibling , one has id of 0, then 1 , then 2 , but that was not considered unique?

mikethompson14:08:15

Not sure. Too tired to parse

shaym14:08:19

or is this back to the reagent issue of handling sequences

mikethompson14:08:29

But the approach decribed above is roughly how it works

shaym14:08:51

@mikethompson: k tx, ill try it out