This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-04-12
Channels
- # bangalore-clj (4)
- # beginners (77)
- # boot (71)
- # cider (10)
- # clara (1)
- # cljs-dev (52)
- # cljsjs (28)
- # cljsrn (1)
- # clojure (390)
- # clojure-dev (5)
- # clojure-india (1)
- # clojure-italy (5)
- # clojure-nl (24)
- # clojure-poland (4)
- # clojure-russia (123)
- # clojure-spec (71)
- # clojure-taiwan (2)
- # clojure-uk (8)
- # clojurescript (236)
- # core-matrix (6)
- # cursive (19)
- # datomic (16)
- # defnpodcast (2)
- # editors (1)
- # emacs (36)
- # garden (2)
- # hoplon (5)
- # jobs (1)
- # jobs-discuss (10)
- # juxt (47)
- # luminus (4)
- # lumo (6)
- # off-topic (207)
- # om (1)
- # onyx (20)
- # pedestal (40)
- # perun (2)
- # re-frame (8)
- # reagent (48)
- # ring (2)
- # ring-swagger (2)
- # specter (13)
- # unrepl (89)
- # vim (6)
I want to insert several cells into a table based on a condition. Is there a nicer way to do it than this?
[:tr
[:td "Cell 1"]
(when (pred x)
(list ^{:key 1} [:td "Extra cell 1"]
^{:key 2} [:td "Extra cell 2"]))]
Any reason why you consider this approach ‘bad’?
Not really, I'm relatively happy with it. Was just wondering if anyone had found a nicer pattern.
I looks very clean and readable if you asked me 🙂
@curlyfry that's pretty close to nice IMO
somewhat more explicit; (cond-> [:tr [:td "Cell 1"]] (pred x) (into [[:td {:key 2} "2"] [:td {:keys 3} "3]]))
Or maybe
(-> [:tr [:td "1"]]
(into (when (pred x)
(list [:td "2"] [:td "3"]))))
Note: how I don't have to use a :key
(@pesterhazy could have omitted :key
too)@mikethompson, do you not need :key
?
No, :key
only needed when you supply a list
Your solution and mine use into
to fold the :td
into the vector, rather than supplying them as an embedded list
@mikethompson but doesn't React itself require keys for elements with multiple children? https://facebook.github.io/react/docs/lists-and-keys.html
This works without :key
(defn view
[]
[:tr
[:td "1"]
[:td "2"]
[:td "3"]])
I just tried it, you're right,but I'm not sure why
according to React's documentation it should issue a warning, shouldn't it?
This will produce a warning:
(defn view
[]
[:tr
[:td "1"]
(list [:td "2"]
[:td "3"])])
Notice the embedded list
but that's a separate issue, a warning generated by reagent
there are warning printed by React itself
there must be something I'm missing here...
@pesterhazy Reagent adds react keys to vectors automatically (it uses the index), but not lists
(I could be wrong, I haven't checked the code)
@fernandohur @pesterhazy @mikethompson Thanks a lot for the replies!
@juhoteperi very interesting. If reagent does that, it seems like a bad idea, given that react chooses not to assign keys automatically
@pesterhazy I guess I was wrong
In React <ul><li>foo</li><li>bar</li></ul>
doesn't need keys, but const list = ["foo", "bar"].map((v) => <li>{v}</li>); return <ul>{list}</ul>
does need keys
My understanding is that React can differentiate static lists and dynamic lists
This post shows difference of compiled JS code: http://jasonjl.me/blog/2015/04/18/rendering-list-of-elements-in-react-with-jsx/
In static list case, all the list elements have createElement call in the parent createElement
In dynamic list case, there is single Array (created by map
)
@juhoteperi nice detective work
so the salient point is here: https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L400
reagent spreads the arguments using apply
in its call to createElement
so it calls createElement("div", null, li1, li2, li3)
instead of createElement("div", null, [li1, l2, l3])
and only the latter form triggers the warning because it is assumed that the first version is "manual" or static
is that your theory?
React is full of these little inconsistencies (you can pass multiple scalars or an array) with subtle differences
@juhoteperi I think you're right: https://github.com/facebook/react/blob/master/src/isomorphic/classic/element/ReactElementValidator.js#L142
baking-soda looks fantastic but i'm locked into bootstrap 3 (instead of 4). is there an equivalent? https://github.com/gadfly361/baking-soda
also, can someone explain what :component-function
does in the context of Form 3 components? thanks! 🙂 https://github.com/reagent-project/reagent/blob/4ea070d15a50c5fcee8dee526b79db9e6c8dd6aa/test/reagenttest/testreagent.cljs#L415
@joshkh would you be willing to use https://react-bootstrap.github.io/introduction.html? If so, I can probably wrap it for use with reagent
May I ask what does the ^{:key 1} does in this expression? ` (list ^{:key 1} [:td "Extra cell 1"] ^{:key 2} [:td "Extra cell 2"]) `
@mikeb it attaches a metadata map {:key 1}
to the :td
hiccup vector, which is then used by reagent to assign a component key to the generated react component https://facebook.github.io/react/docs/lists-and-keys.html
it makes sense when the caller has the context to provide the key and rather than a literal [:td ...]
vector you have another component fn call. i’m not sure if either form is preferred over the other