Fork me on GitHub
#reagent
<
2015-06-19
>
mitchelkuijpers12:06:48

Hi i have a question about reagent and children

mitchelkuijpers12:06:00

If I create a component like this:

mitchelkuijpers12:06:08

(defn aui-page-panel
  [name]
  (let [this (reagent/current-component)]
      [:div.aui-page-panel
       [:div.aui-page-panel-inner
        [:section.aui-page-panel-content
         (reagent/children this)]]]))

mitchelkuijpers12:06:45

I can all it like this `[aui-page-panel "str" [:div "first"] [:div "second"]]

mitchelkuijpers12:06:01

I can call*

[aui-page-panel "str" [:div "first"] [:div "second"]]

mitchelkuijpers12:06:22

but when i remove the name argument like this:

mitchelkuijpers12:06:25

` (defn aui-page-panel [] (let [this (reagent/current-component)] [:div.aui-page-panel [:div.aui-page-panel-inner [:section.aui-page-panel-content (reagent/children this)]]]))

mitchelkuijpers12:06:30

(defn aui-page-panel
  []
  (let [this (reagent/current-component)]
      [:div.aui-page-panel
       [:div.aui-page-panel-inner
        [:section.aui-page-panel-content
         (reagent/children this)]]]))

mitchelkuijpers12:06:43

I cannot call it anymore with children and it expects 3 arguments

mikethompson12:06:46

@mitchelkuijpers: Hmm. I've never tried these sort of hyjinks. I'm a bit worried to see them. What are you trying to do?

mitchelkuijpers12:06:02

Simply trying to make a component with children

mitchelkuijpers12:06:13

Maybe I am doing it horribly wrong

mikethompson12:06:13

Would something like this work (ignoring some divs):

(defn aui-page-panel
   [name & args]  
   (into [:div name] (map #(vector :div %) args)))   ;; results in  [:div name [:div "first"] [:div "second"]]

;; used like this
[aui-page-panel  "name"   "first"  "second"]

mikethompson12:06:51

Note that I'm NOT passing in full child components, but rather the strings to be used in building the child components

mitchelkuijpers12:06:24

Aha I actually want to pass some children components

mitchelkuijpers12:06:35

but maybe I should just pass one child component

mitchelkuijpers12:06:53

and then just do

[:div [child-component]]

mikethompson12:06:34

In that case, I would have thought it was as simple as this (untested):

(defn aui-page-panel
   [name child1 child2]  
   [:div name  child1 child2])

;; used like this
[aui-page-panel "hello" [:div "first"] [:div "second"]]

mitchelkuijpers13:06:44

Aha I wanted a variable amount of children

mitchelkuijpers13:06:58

But I guess I was making it too hard for myself 😛

mikethompson13:06:29

Variable number of children. Something like this (untested)?

(defn aui-page-panel
   [name & children]  
   [:div name  children])      ;;   perhaps needs to be:    (into [:div name] children)

;; used like this
[aui-page-panel "hello" [:div "first"] [:div "second"] [:div "third"]]

mitchelkuijpers13:06:16

@mikethompson: the into works like charm 😄