This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-07-10
Channels
- # admin-announcements (4)
- # beginners (21)
- # boot (85)
- # cider (31)
- # clojure (45)
- # clojure-australia (1)
- # clojure-berlin (2)
- # clojure-dev (7)
- # clojure-italy (10)
- # clojure-japan (17)
- # clojure-norway (8)
- # clojure-russia (2)
- # clojure-uk (15)
- # clojurebridge (1)
- # clojurescript (115)
- # code-reviews (13)
- # core-async (1)
- # editors (17)
- # euroclojure (5)
- # jobs (1)
- # ldnclj (9)
- # off-topic (5)
- # om (18)
- # re-frame (15)
- # reagent (25)
- # sydney (1)
How can I prevent the Warning: Every element in a seq should have a unique :key
when I have something like this:
[:div
(if (some-pred? v)
[:p "shown sometimes])
(if (another-pred? v)
[:p "also optional"])
you can avoid that by doing:
[:div
(if (some-pred? v)
[:p {:key "x"} "shown sometimes])
(if (another-pred? v)
[:p {:key "not x"} "also optional"])
into [] ?
i.e. give it a key, it is a huge perf boost, which is why react nags about it constantly
i bet @mikethompson knows
@escherize: the thing is, the key should be consistent for a given element - so that when DOM diff is done it will be able to tell that it's the same as before
See intro docs: http://reagent-project.github.io/
Look for the mention of ^{:key item}
it's important in cases where, for example you add something to the beginning of a long list - without key, every element in the list would get rerendered
Keys have to be unique among siblings (not globally unique ... this is a common misunderstanding)
Advanced techniques using keys: https://groups.google.com/forum/#!topic/reagent-project/tNY4gzk7TUY
If you need to generate a key value, and there's none easily available, then this can be useful: http://google.github.io/closure-library/api/namespace_goog.html#getUid
I'm trying to do, basically:
(if (valid-password? @password)
[save-button @password]
[wait-button])
This either does not replace the buttons correctly (always returning save-button), or fails to pass on the updated value of password
.
I am pretty sure this has to do with how React renders components, but I'm not sure about the right way in Reagent/Re-frame.
Throwing it in its own function, or using dommy
to hide one, failed to fool React. Any ideas how this should be done?