Interactive list in Reagent

Question

I want to create a list of html elements (which include the results of a query) which are hidden by default but the user can toggle that state. I have tried a couple different ways below as toy examples but can't get either to work.

This code correctly creates three buttons, which were alter the exps state correctly but which do not ever hide content.

(:require  [reagent.core :as r] )
(def exps (r/atom [true true true]))
(defn like-component []
  [:div   
   (for [ [i r] (map-indexed vector  ["A" "B" "C"])] 
     [:div
       [:button {:on-click #(swap! exps update-in [i] not)}]
       (when (nth @exps i)
          [:pre (str i r)])])])

(r/render [like-component]
      (js/document.getElementById "app"))

On the other hand, the code below will create only one element but it works correctly.

(defn expandable-view [e bool]
  (let [expanded (r/atom bool)]
          (fn []
            [:li
            [:div.expandable
              [:div.header {:on-click #(swap! expanded not)}
               "Click me to expand and collapse"]
              (if @expanded
                [:div.body  (allow-html :pre e)])]])))


(defn like-component []
  [:ul
    (vec
      (for [ e  ["A" "B" "C"]]
        (expandable-view e true ))) ])

(r/render [like-component]
          (js/document.getElementById "app"))

Edit: Possibly related: https://github.com/reagent-project/reagent/wiki/Beware-Event-Handlers-Returning-False

curist · Accepted Answer

for is lazy, so reagent can't tell you're dereferencing exps in the first code snippet.

We can workaround it by explicitly dereferencing atoms.

(defn like-component []
  (apply str @exps) ;; because @exps is a vector, and reagent
                    ;; treat vectors as hiccup component
                    ;; we can't just put `@exps` here.
  [:div   
   (for [ [i r] (map-indexed vector  ["A" "B" "C"])] 
     [:div
       [:button {:on-click #(swap! exps update-in [i] not)}]
       (when (nth @exps i)
          [:pre (str i r)])])])

Or just wrap the lazy sequence in doall.

(defn like-component []
  [:div   
   (doall (for [ [i r] (map-indexed vector  ["A" "B" "C"])] 
     [:div
       [:button {:on-click #(swap! exps update-in [i] not)}]
       (when (nth @exps i)
          [:pre (str i r)])]))])

FYI, related discussions.

any idea why the second block I posted only creates one element?

Vectors are special citizens for Reagent, they're treated as hiccup/React components.

For a working example

(defn like-component []
  [:ul
    (doall
      (for [ e ["A" "B" "C"]]
        [expandable-view e true]))])

Also notice that we are using [expandable-view e true] to properly construct a reagent component. For more informations, I'd strongly suggest reading Using [] instead of () and Creating Reagent Components.

Interactive list in Reagent

Answers (2)

Related Questions