How can I change CSS class name dynamically with reagent?

Question

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])])))

Daniel Compton · Accepted Answer · 2017-06-14 01:15:59Z

11

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.

answered Jun 14, 2017 at 1:15

Daniel Compton

14.7k5 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I change CSS class name dynamically with reagent?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related