This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-10-27
Channels
- # announcements (11)
- # aws (1)
- # babashka (15)
- # beginners (345)
- # calva (5)
- # chlorine-clover (14)
- # clj-kondo (40)
- # cljfx (30)
- # clojure (174)
- # clojure-australia (6)
- # clojure-europe (64)
- # clojure-france (1)
- # clojure-nl (12)
- # clojure-uk (20)
- # clojurescript (29)
- # conjure (1)
- # core-async (53)
- # cryogen (3)
- # cursive (8)
- # datomic (12)
- # emacs (5)
- # events (4)
- # fulcro (27)
- # graalvm (1)
- # graphql (9)
- # helix (8)
- # keechma (11)
- # london-clojurians (1)
- # malli (12)
- # off-topic (12)
- # pathom (8)
- # portal (1)
- # re-frame (19)
- # reagent (13)
- # reitit (16)
- # ring-swagger (2)
- # sci (38)
- # shadow-cljs (31)
- # spacemacs (3)
- # specter (14)
- # sql (14)
- # tools-deps (31)
- # vim (4)
- # xtdb (9)
hello, I'm trying to use some props as a fn call result, like this:
(defn dom-props [{::keys [state] :as props}]
(cond-> (coll/filter-keys simple-keyword? props)
state
(as-> <>
(let [[value set-value!] state]
(assoc <> :value value :on-change #(set-value! (.. % -target -value)))))
true
clj->js))
(defn dom-select
[{::keys [options] :as props}]
(dom/select (dom-props props)
(for [[value label] options]
(dom/option {:value (pr-str value)} (str label)))))
the problem is that Helix thinks that (dom-props props)
is supposed to be a child, not the props
is there a way around this?
I believe you have to use the spread symbol there.
(defn dom-select
[{::keys [options] :as props}]
(dom/select {:& (dom-props props)}
(for [[value label] options]
(dom/option {:value (pr-str value)} (str label)))))
👍 3
oconn and dominic are correct - when using the dom and $ macros, it’s assumed that props will be written literally. if you’d like to use dynamic props, you can pass a & prop that helix will merge with any of the literally written props
https://github.com/lilactown/helix/blob/master/docs/creating-elements.md#dynamic-props
cool nice, I didn't knew about the {:& ...}
syntax, that works 👍