Hello,
I have the following Form-2 component which defines a local ratom called
state.
(defn main-view []
(let [state (r/atom {:children [:div]
:counter 0})
(fn [_]
[:div
[:input {:type :button
:value "Add child"
:on-click #(swap! state update :children conj [:div
"Current counter: " (:counter @state)])}]
[:input {:type :button
:value "Inc Counter"
:on-click #(swap! state update :counter inc)}]]
[:div "This updates correctly: " (:counter @state)])}]
[:div
(:children @state)]]
)))
When I display the component, it shows the two input buttons, and a div
with "This updates correctly: 0".
Pressing "Add child" adds a new div to the :children div at the end, taking
the current value of (:counter @state) and displaying that. So the first
time I press the Add child button it will add "Current counter: 0".
When I then press "Inc Counter", what happens is that the div which says
"This updates correctly: 0" updates to "This updates correctly: 1". However
the child I have added remains unchanged. If I add a new child, the new one
will display the correct value of (:counter @state). In short, once any of
the children are added, they never update to reflect the current value of
(:counter @state).
My understanding is that when a ratom changes, any component which
references it will be re-rendered and hence the "This updates correctly: *"
div updates as expected. However, any div which is dynamically added in the
"Add child" event handler does not. Both of them reference (:counter
@state), however only the one in the div that is created outside of the
event handler, within the actual component function, behaves as I would
have expected.
I suspect that this is due to the way I am dynamically adding the Hiccup
vector within the event handler, specifically that when I am dereferencing
state I am literally just taking its value at that time rather than setting
up the mechanism which would update the :div in the event that (:counter
@state) is updated, as with the "This updates correctly " div. But I don't
know for sure.
Can someone please explain what exactly is happening here, and also how can
I achieve my intended result, that of dynamically adding a new component
which can reference a ratom and which will change when the ratom changes?
Thank you,
Ali
--
You received this message because you are subscribed to the Google Groups
"Reagent-Project" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to reagent-project+unsubscr...@googlegroups.com.
To post to this group, send email to reagent-project@googlegroups.com.
Visit this group at https://groups.google.com/group/reagent-project.
For more options, visit https://groups.google.com/d/optout.
