3

I am diving into React with Om/Clojurescript, having worked with jQuery for all my frontend work to date, I am at a major roadblock for understanding how to achieve simple and common tasks that are a oneliner in jQuery.

Take, for a very simple example, a button that toggles a menu:

$('#hamburger-icon').click(function(){
  $('.menu-can-toggle').toggleClass('active');
});

http://jsbin.com/tufisufaha

From my understanding, I cannot implement this simple jQuery functionality in React as it is doing DOM manipulation outside of React which can lead to problems, correct?

Thus, I've done, from what I can figure out, something that I'm imagining isn't the best solution:

(defcomponent test-header [app owner]
  (init-state [_]
    {:open false})
  (render-state [_ {:keys [open]}]
    (dom/div #js{:id "menu-trigger" :className (str (when open "active"))
      :onClick #(om/set-state! owner :open (not (om/get-state owner :open)))}
      (dom/span {:class "line line-1"})
      (dom/span {:class "line line-2"})
      (dom/span {:class "line line-3"}))
    (dom/ul {:id "menu"}
      (dom/li "Item 1")
      (dom/li "Item 2")
      (dom/li "Item 3"))))

Where, when clicking #menu-trigger, it toggles its :open state. I'm now confused how I can toggle the .active class of ul#menu, or how other components can respond to this action. (akin to the selector $('.menu-can-toggle') in jQuery.

I believe it's just a matter of getting my head around a new paradigm or approach to a task like this, but everything I've found seems incredibly complex with React CSSTransitionGroup etc, and I am just wondering if there is a standard way to achieve simple tasks like with the (essentially single line of) jQuery above.

Community
  • 1
  • 1
waffl
  • 5,179
  • 10
  • 73
  • 123

1 Answers1

0

Put a function in ul that toggles the classname based on the value of "open". For instance, display (block or none).

(defn display [open]
  (if open
    #js {}
    #js {:display "none"}))

Basically, jQuery is finding the nodes and adding/removing classes. When your component is re-drawn (onclick + state change) you have to modify the "virtual DOM" with code. React will take care of the rest.

Chaos Rules
  • 410
  • 1
  • 3
  • 14