How can I change CSS class name dynamically with reagent?

Question

About reagent.

I need to change some CSS class name dynamically. How should I do that?

Sample code is here.

(defn app []
  (let [array [1, 2, 3]]
    (fn []
      [:div
       (for [index array]
         ;; I wanna change this classname like `item-1, item-2, ...`
         ^{:key index} [:div.i-wanna-change-this-classname-dynamically index])])))

Answer 1

Change

[:div.i-wanna-change-this-classname-dynamically index]

to

[:div {:class (str “item-” index)} index]

Reagent provides a shorthand syntax of :div.class1.class2#id, but you can also set these in a map as the first item in the vector after :div.

Also keep in mind the CSS :nth-child() selector as another option for dynamic styling.