reagent 2023-02-04 | Slack Archive

Ovidiu Stoica08:02:20

How would you define a reagent component so it can be used as the basic hiccup dom components. Example for the component comp:

[comp "Hello"]

[comp {:my-prop val} "hello"]

[comp]

[comp {:my-other-prop val}
  [comp2]
  [comp3]]

hifumi12308:02:49

(defn comp [props]
  (comment "Return hiccup and make use of props here..."))

hifumi12308:02:35

If you want a parent that can host children, then you can use [props & children] for your argument list e.g.

(defn comp 
  "Reproduces your last example"
  [{:keys [my-other-prop]} & children]
  [:div
    [:p "my other prop: " my-other-prop]
    (into [:<>] children)])

disclaimer: didn’t test; react may complain about lack of keys in the child components

hifumi12308:02:52

If you’re asking whether you can define a component that can optionally take in props and optionally take in children, then you’ll want to make a multi-arity function

Ovidiu Stoica09:02:45

But wouldn't this approach fail if you pass children and no props? It seems that reagent would take the first param which is children to be the props map

hifumi12309:02:33

yes, so in the case of 1-arity you’d want to distinguish maps and other objects to decide how to treat the argument

Ovidiu Stoica10:02:58

I see. Thank you!

Ovidiu Stoica12:02:56

(defn container
  [& _]
   (let [this (r/current-component)
         props (r/props this)
         children (r/children this)]
     ;; render login
     [:div {:class-name "container mx-auto px-4 bg-slate-100 dark:bg-slate-900"}]))

^ is this considered to be bad practice for the given context?

2023-02-04

Channels