message react component translated to clojurescript

message.cljs

(ns brazil.core)

(def TU (.. js/React -addons -TestUtils))

(def d js/React.DOM)

(defn toggle-action [state]
  (let [val (not (:show-subhead state))
        new-state (assoc state :show-subhead val)]
    (render new-state)))

(defn increment-counter [state]
  (let [val (:count state)
        new-state (assoc state :count (+ val 1))]
    (render new-state)))

(def Message
  (js/React.createClass
    #js
    {:render
      (fn [_]
        (this-as this
          (let [data (aget (.-props this) "data")
                {:keys [count
                        message
                        subhead
                        toggle-action
                        increment-count
                        show-subhead]} data]
            (d.div nil
              (d.h1 #js {:ref "message-title"}
                (str "hi " message count))
              (if show-subhead (d.h3 #js {:ref "subhead"} subhead)
                               nil)
              (d.div #js {:className "u-displayFlex u-spaceBy--5px"}
                (d.button #js {:ref "toggle-action-btn"
                               :onClick #(toggle-action data)}
                  (if show-subhead "hide subhead" "show subhead"))
                (d.button #js {:ref "increment-counter-btn"
                               :onClick #(increment-counter data)}
                  "increment counter"))))))}))

(defn render [state]
  (let [mount-node (.getElementById js/document "app")
        message (.createElement js/React Message #js { :data state })]
    (.render js/React message mount-node)))

(def state {:count 0
            :message "world!"
            :subhead "im the subhead"
            :show-subhead false
            :toggle-action toggle-action
            :increment-counter increment-counter})

(render state)