reset! on reagent atom doesn't work as intended

Question

So what I'm trying to do is a basic tabbed view using re-com's horizontal-tabs element. I added a v-box element and below that i want to have my tabs element and the body that corresponds to the tab. although on the :on-change i call reset! on the model of the horizontal-tabs and it doesn't seem to work.

(defn left-panel []
  [re-com/box
   :size "auto"
   :child (let [selected-tab-id (r/atom (:id (first left-panel-tabs-definition)))
                change-tab #(reset! selected-tab-id %)]
            [re-com/v-box
             :children [[re-com/horizontal-tabs
                         :model selected-tab-id
                         :tabs left-panel-tabs-definition
                         :on-change change-tab]
                        [(left-panel-tabs @selected-tab-id)]
                        ]])])

(defn forms-view []
  [:div "Forms View"])

(defn swagger-view []
  [:div "Swagger View"])

(def left-panel-tabs
  {::swagger #'swagger-view
   ::forms #'forms-view})

(def left-panel-tabs-definition
  [{:id ::forms
    :label "Forms"
    :say-this "Forms View"}
   {:id ::swagger
    :label "Swagger"
    :say-this "Swagger View"}])

If instead of

[(left-panel-tabs @selected-tab-id)]

i do something like

(do (log @selected-tab-id) [(left-panel-tabs @selected-tab-id)])

it'll always print the value that i've set my reagent atom at the beginning (in this case ::forms)

@selected-tab-id is running before your change-tab is called. Or in other words, you're setting it before reset! is called. If you want that to change, you'll probably need to set it in the change listener (although I've never used reagent before). — Carcigenicate

Nikolas Pafitis Nikolas Pafitis · Accepted Answer · 2019-12-23T09:28:37

Thanks to u/Galrog over at reddit I realised that in order for this to work i need to create a Form-2 component (3 forms of creating a component http://reagent-project.github.io/docs/master/CreatingReagentComponents.html#the-three-ways)

Changing my left-panel component to a Form-2 component re-renders both children on the atom's change

Code:

(defn left-panel []
  (let [selected-tab-id (r/atom (:id (first left-panel-tabs-definition)))
        change-tab #(reset! selected-tab-id %)]
    (fn []
      [re-com/box
       :size "auto"
       :child [re-com/v-box
               :children [[re-com/horizontal-tabs
                           :model selected-tab-id
                           :tabs left-panel-tabs-definition
                           :on-change change-tab]
                          [(left-panel-tabs u/selected-tab-id)]]]])))

reset! on reagent atom doesn't work as intended

1 Answers