Fork me on GitHub
#reagent
<
2017-03-21
>
Petrus Theron09:03:46

How do I allow Form-2 component to return a list of multiple elements instead of a vector? I need to render two :div elements per iteration for a Semantic accordion, but (list [:div ...] [:div ...]) breaks when you add local state. Returning a single div breaks the CSS. Here is my component:

(defn customer-accordion [customer]
  (let [active? (atom false)]
    (fn [customer]
      (list
        ^{:key (str (:id customer) ":accordion")}
        [:div.title
         {:on-click #(swap! active? not)
          :class    (if @active? "active")}
         [:i.dropdown.icon] (:name customer)]
        ^{:key (str (:id customer ":accordion-content")}
        [:div.content
         {:class (if @active? "active")}
         [:div "Some more data goes here"]]))))

kishanov14:03:41

@petrus let me enter “the ugliest solution” competition 🙂

juhoteperi18:03:57

React doesn't (currently) support components which render multiple nodes: https://github.com/facebook/react/issues/2127