Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
message react component translated to clojurescript
(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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.