on-click handler for a list item reagent clojurescript

Question

I want to add a on-click handler for each item in my list.

(defonce selected-department (atom "department!"))

(defn sidebar []
  [:div#sidebar-wrapper
   [:ul.sidebar-nav
    [:li.sidebar-brand [:a {:href "#"} "Departments"]]

    ;;[:li [:a {:on-click (reset! selected-department "test!")} "Dairy"]]

    [:li [:a {:href "#"} "Dairy"]]
    [:li [:a {:href "#"} "Deli"]]
    [:li [:a {:href "#"} "Grocery"]]]])

Then selected-department is a label which I want to show/use the data

(defn response-box []
  [:div#form_comparison
   [:label#dlabel @selected-department]])

The commented out piece of code doesn't work. Is there a way to make this work?

Viktor K. · Accepted Answer · 2015-06-23T18:55:47.143

7

Your example is not working because you have to pass a function to :on-click like this :

[:li [:a {:on-click #(reset! selected-department "test!")} "Dairy"]]

So the only thing that you need to change is to add # before the (reset! ...

It is the equivalent for

 [:li [:a {:on-click (fn [_] (reset! selected-department "test!"))} "Dairy"]]

Edit :

This is the full code that I tested and works fine for me :

(defonce selected-department (atom "department!"))

(defn sidebar []
  [:div#sidebar-wrapper
   [:ul.sidebar-nav
    [:li.sidebar-brand [:a {:href "#"} "Departments"]]
    [:li [:a {:on-click #(reset! selected-department "Dairy") :href "#"} "Dairy"]]
    [:li [:a {:on-click #(reset! selected-department "Deli") :href "#"} "Deli"]]
    [:li [:a {:on-click #(reset! selected-department "Grocery") :href "#"} "Grocery"]]]
 [:label @selected-department]])

(reagent/render-component [sidebar] (.getElementById js/document "app"))

The label at the bottom is updated when an item in the list is clicked.

edited Jun 23 '15 at 18:55

answered Jun 23 '15 at 18:27

Viktor K.

2,670
2
19
30

That makes sense but I have tried both with no luck in changing the atom in the ui to what list item has been clicked. – Michael Thurmond Jun 23 '15 at 18:49
I am able to run it and it works for me. Just to stay sure I've edited the answer and pasted my whole solution in here. – Viktor K. Jun 23 '15 at 18:56
It works now, I must have made a small mistake somewhere. Thanks! – Michael Thurmond Jun 23 '15 at 19:05
I am stil wondering whether it is legit to exploit the JS impl of functions by passing a fn0 instead of a fn1. – Leon Grapenthin Jun 23 '15 at 19:48

on-click handler for a list item reagent clojurescript

1 Answers1