react learning: shared state example

Using Reagent

(def str-area (reagent/atom "init"))
(def length (reagent/atom 0))

(defn my-text-area [area-value]
  [:textarea {:id :comments
              :defaultValue @area-value
              :on-change #(do
                            (reset! str-area (-> % .-target .-value))
                            (reset! length (count (-> % .-target .-value))))}])

(defn text-counter []
  [:div
   "Counter: " @length])

(defn text-value []
  [:div
   "Value: " @str-area])

(defn app []
  [:div
   [my-text-area str-area]
   [text-counter]
   [text-value]])

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

It looks like this:

Using RUM

(enable-console-print!)

(rum/defc count-label
  [value]
  [:div [:label (str "Count:" (count @value))]])

(rum/defcs app < (rum/local "hi!" ::value)
  [state]
  (let [v (::value state)]
    [:div
     [:div [:textarea {:default-value @v :on-change (fn [e] (reset! v (-> e .-target .-value)))}]]
     (count-label v)
     [:div [:label (str "Value:" @v)]]]))

(rum/mount (app) (.getElementById js/document "app"))