Render two components in reagent / reframe

Question

I have some code:

(defn second-panel []
    [:div
     [:h1 "Hello "]
     ])

(defn root-container []
  (second-panel)
  (let [name (re-frame/subscribe [::subs/name])]
    [:div
     [:h1 "Hello from " @name]
     ]))

but only the root-container component renders. Why is my second-panel function not rendering? Many thanks.

Answer 1

You have to add (second-panel) to your div. The return value of (second-panel) is currently ignored.

(defn root-container []
  (let [name (re-frame/subscribe [::subs/name])]
    [:div
     (second-panel)
     [:h1 "Hello from " @name]
     ]))

Answer 2

The correct solution to returning multiple virtual DOM elements from a function without wrapping them in a container element is to use a Fragment. In reagent this is handled by the :<> special keyword.

(defn second-panel []
  [:div
   [:h1 "Hello "]])

(defn root-container []
  (let [name (re-frame/subscribe [::subs/name])]
    [:<>
     [second-panel]
     [:div
      [:h1 "Hello from " @name]
      ]]))

;; or, with the nested let. both variants are fine.

(defn root-container []
  [:<>
   [second-panel]
   (let [name (re-frame/subscribe [::subs/name])]
     [:div
      [:h1 "Hello from " @name]
      ])])

There is also a different in (second-panel) and [second-panel] since (second-panel) will actually call the function directly which means it will not behave like a regular reagent function but instead become part of the caller. You should prefer the [second-panel] notation for all "component" type functions.