What do you mean by "fails"? The ref should be set only after the component is rendered.

Yes, but the swap of values into "pos" doesn't work and I'm not sure when I could call that function after the component has rendered. The on-click works as expected, but I would like to do this without user interaction. this probably means that I'm barking up the wrong tree.

When you write stuff like "fails" or "doesn't work" you really should specify what your expected behavior is and what exactly the observed behavior is. "Fails" is not a behavior. But after a closer look at your code, it's clear that you used swap! wrong. The function accepts another function and not the value itself. You should use reset! instead.

I'm not sure, because the error is that it is returning null, as the property can't be accessed until it is rendered

The :ref function is called after the component is rendered.

I'm not getting that behaviour, (reset! pos (.-y (.getBoundingClientRect @!ref))) also throws an error at that point

As I mentioned above - what error?

Oh, wait, another thing - you are not passing a function to :ref. Why do you have that do block there?

Both calls to reset! should be inside that (fn [el] ...) and there should be no do altogether.

error is Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect') with or without the do block.

Yeah, which should go away when you fix the do mistake.

What is your current code?

(defn title-line []
      (let [!ref (atom nil)
            pos (atom nil)
            ]
           [re/v-box
            :attr {:ref  (fn [el] (reset! !ref el)
                             (reset! pos #(.-y (.getBoundingClientRect @!ref)))
                                 )
                   :on-click #(js/console.log (.-y (.getBoundingClientRect @!ref))) ;works
                   }
            :children [
                       [:div
                        {:style {:color (if (< @pos 130) "red" "blue")
                                 }}
                        (str @pos "position")]

                       ]]

           )
      )

Why do you have # in there now? It should be just (reset! pos (.-y ...)).

Some meta-comments: • Always format your code properly. It helps you see the overall structure much better - it would've helped avoid the do mistake. Your IDE should help you with that, e.g. in Cursive I just press Ctrl+Shift+L after any reasonable amount of changes (new lines I still have to arrange myself) • Whenever you're stuck, split the problem into blocks and think about each individual block separately. Learn the parts of every block so you can always model what will happen in your head - that would've helped avoid other mistakes with swap! and # and thinking that :ref is to blame

without the # it throws the same error. I appreciate the advice, I'm very much a constant beginner

What exactly is your current code? What exactly is the error, including the stacktrace?

hi, I got rid of the stacktrace, however this still isn't actually working as expected, the comparison in the style of the div doesn't have any effect, all text is red no matter the values in the atom pos. The inner and the outer logs both return the same values, but this makes sense as they've already been rendered at that point and aren't moving.

(defn title-line []
      (let [!ref (atom nil)
            pos (atom nil)
            ]
           [re/v-box
            :attr {:ref (fn [el] (when el
                                       (reset! !ref el)
                                       (reset! pos (.-y (.getBoundingClientRect @!ref)))
                                       )
                                 )
                   :on-click #(js/console.log (str "outer" @pos))
                   }
            :children [
                       [:div
                          {:style {:color (if (> @pos 300.00)
                                            "white"
                                            "red"
                                            ) }
                           :on-click #(js/console.log (str "inner" @pos))
                           }
                          "TITLE"]
                       ]
            ]

           )
      )

That's because you used a plain let at the very root of the component - the ratoms are reset on each re-render. Instead, you can use one of: • A form-2 component • A form-3 component (you'd be able to use :component-did-mount instead of :ref then, which is IMO a bit more clean) • reagent.core/with-let instead of that let All are plentifully documented in the Reagent docs, which I suggest reading in their entirety as they'll make writing future code much easier.

thank you @U2FRKM4TW! With-let solved it immediately, but I'll look up the form-3 component tomorrow.

> Do I really have to hold state in form then pass it as a prop to each child component? Yes. Pretty much in the same exact way you'd do it in plain React. You can potentially use context but that would be much more work for no real gain in this case.

I know I could potentially make on-change dispatch re-frame events instead. But I'm worried about the performance "penalty" of that. For now I'll just pass around a ratom to the children props. Thanks for the feedback!

I would recommend looking into https://react-hook-form.com/ you can use it with reagent function components more info: https://cljdoc.org/d/reagent/reagent/1.1.0/doc/tutorials/react-features

is it possible to integrate react-hook-form with clojure spec? im not sure how easy it'd be to integrate my input components into this library

I found a promising library called https://github.com/luciodale/fork which I may experiment with later. Looks to have solved the problems I've been getting with re-frame, form state, form validation

yea, pretty straightforward to integrate with spec - you can copy what I did for use with malli: https://github.com/dvingo/malli-react-hook-form

Also check out http://inside-out.matt.is from @U050RLRRQ