Changing a local atom not reflected in UI

[adwelly]

I'm just getting started with re-com so it is entirely possible that this is the wrong way to do things, but given the following code:

(ns ^:figwheel-always recom-model.core
    (:require [reagent.core :as reagent :refer [atom]]
              [re-com.core  :refer [button v-box input-text]]))

(enable-console-print!)

(defn top-level []
  (let [text-model (atom "initial text")]
    (fn []
      [v-box :padding "10px"
                 :children [[input-text :model text-model
                                                 :on-change #(println "Input text has" %)]
                  [button :label "Clear" :on-click #(reset! text-model "")]]])))

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


(defn on-js-reload []
  ;; optionally touch your app-state to force rerendering depending on
  ;; your application
  ;; (swap! app-state update-in [:__figwheel_counter] inc)
)

...which produces an input-text followed by a button, the button will clear the text as expected until the first character is entered into the text box by hand. Then the clear button stops working.

What is the correct way to do this?

[Gregg8]

The input-text component takes the :model you pass it (can be a value or an atom) and copies the value into its own internal atom and uses that from then on.

The value it returns to the :on-change event is the new value of its internal atom. It does not change your atom in any way.

This allows you to have full control of what goes into your atom. It also means you have to reset! your atom to the new value for the change to take effect.

So, simply add a (reset! text-model %) inside the :on-change function and it should do what you want.

For further clarity (I hope), the reason it works the first time is because the Clear button DOES reset! YOUR atom, but your atom then remains empty after that.

[adwelly]

Aha!

Thanks