Fork me on GitHub
#reagent
<
2019-05-24
>
Mno14:05:59

I can’t figure out why it’s complaining about “`Warning: Each child in a list should have a unique "key" prop.`” when the entire list has unique uuids as the key.

Mno15:05:31

I’ve set the id to be the same as the key and I check manually and it does have them, I have no idea what I could be missing.

Mno15:05:52

So any suggestions as to where to look would be nice.

manutter5115:05:55

React is looking for a metadata “key” property

Stefan15:05:56

The list items themselves need to have unique keys; did you take care of that?

dpsutton15:05:04

check the frequencies of the keys in the list

manutter5115:05:20

Oh, right It could be a duplicate key

Mno15:05:39

I checked for duplicates..

manutter5115:05:52

You’re setting keys with ^{:key some-key-value}, correct?

Mno15:05:14

ah.. so it needs the ^?

Mno15:05:55

(default case is the only important one the rest are pretty much the same)

manutter5115:05:05

Yeah, pull the key out separately, I think?

manutter5115:05:26

I never tried putting a key inside the options map, so I won’t say that doesn’t work, but I always use the ^{:key some-key} [:div {...} ...] style and that seems to work pretty well

👆 4
manutter5115:05:09

I’m more a re-frame guy than straight reagent, so apologies if my habits/assumptions aren’t a good fit

Mno15:05:12

ok let’s try that and see if it works, maybe I should re-read the documentation 😅

lilactown15:05:11

@hobosarefriends the problem is not in that code

lilactown15:05:26

you need to assign the key where you're using the node component

Mno15:05:04

so in this other horrible bit of code?

lilactown15:05:22

inside of your map, you need to assign each one a unique ID

lilactown15:05:21

assigning the :div a key inside of the node component doesn't help tell React which node instance is unique inside of your collection you're rendering

Mno15:05:06

so it would be ... [node {key: keythingy} node-info])..?

lilactown15:05:30

maybe? this is where Reagent gets a bit weird with props and such

Mno15:05:31

or as metadata?

lilactown15:05:35

I would use the metadata to be sure

Mno15:05:50

testing..

lilactown15:05:14

ex:

(map (fn [node-info] ^{:key (get-in node-info [:child :uuid])} [node node-info]) @current-graph)

Mno15:05:36

did that, didn’t like it, did it without the metadata and it liked it, sorta

Mno15:05:45

for reference the following worked, metadata did not.

(map (fn [node-info] [node {:key (get-in node-info [:child :uuid])} node-info]) @current-graph)])
Thanks for the help!

lilactown15:05:05

interesting. happy to help!

Mno15:05:03

actually no I just typed yours wrong, it definitely does work as per your example

borkdude20:05:51

are there already tools that detect wrong arity calls for Reagent component function calls like (defn foo [] [:div [:p "hello"]]) [foo 1 2 3]? I’m considering this for clj-kondo but one issue is to tell the difference between a Reagent function call or just a vector with some values where the first value is a value referenced by a symbol

lilactown20:05:56

yeah, it is difficult. one of the reasons why I enforced a strict [component (optional props) & children] signature in hx

borkdude20:05:58

criteria could be: - .cljs or .cljc file (and only in cljs parts) - reagent.core is required in the namespace

borkdude20:05:35

I think most false positives would be resolved that way, but if there’s better criteria, I’d like to know 🙂

lilactown20:05:46

hmm. the dream would be that you could follow the call-graph from the point of (reagent.core/render [root-component]), statically

borkdude20:05:46

I’ve also been thinking about that, but I’d like clj-kondo to also function if it doesn’t know the entire project yet

borkdude20:05:47

metadata on functions can also work, but I also don’t want people to change code because of a linter, that defeats the purpose

lilactown20:05:34

yeah, I think you're always going to run into ambiguity with:

(defn foo [bar]
  [baz 1 2 3])

lilactown20:05:59

is it a component? or just some other thing? 😄

borkdude20:05:29

if it’s another thing, what would Reagent do?

borkdude20:05:41

(if foo was a component)

lilactown20:05:03

if foo is a component, but baz is... some other thing?

lilactown20:05:55

reagent will determine if it matches the following: - keyword? - ifn? if it's neither of those, it believe it will error

lilactown20:05:34

but I think there's ambiguity about whether foo is a component is what I meant

borkdude20:05:41

then again, how prevalent is code like [x 1 2 3] in Clojure code… I could write the linter and then see how many times it fails

lilactown20:05:40

I'd always prefer my tools to not yell at me, even if it should, rather than yell at me when it shouldn't

lilactown20:05:51

but interested to see if there's a good-enough heuristic here

borkdude20:05:44

I agree, err on the side of false negatives