Cross-posting from #clojurescript, I am having a hard time figuring out how to pass components as arguments to another component

I am trying to create a "tree" of nested reagent components, each node has a content component passed to it, as well as any number of child component nodes

This is what I have arrived at so far:

(defn simple-node [node-content & children]
  (let [node-state (r/atom {})]
    (fn [node-content & children]
      [:li.tree-node
       [:div.tree-content node-content]
       [:ul.tree-body
        (map-indexed #(with-meta %2 {:key %1}) children)]])))

This works, except that when I update a session value referenced by one node's node-content, all nodes re-render

Demonstrated by the following code:

[:div
   [:div (labelled-input :string "A" [:a])]
   [:div (labelled-input :string "B" [:b])]
   [:div (labelled-input :string "C" [:c])]
   [simple-node [:p (str (session/get :a) " " (rand-int 10000))]
    [simple-node [:p (str (session/get :b) " " (rand-int 10000))]
     [simple-node [:p (str (session/get :c) " " (rand-int 10000))]]]]]

(labelled-input is just an HTML string input, allowing me to modify the session values)

when you say “session value” you mean when you update the “note-state” atom?

I am updating a value in the reagent session atom

Referenced by the node-contents passed in.

node-state is unused for now. It is only there because I eventually wish each node to maintain its own state (whether it is collapsed or expanded, for example)

okay i’m not an expert but I think that’s as expected.

if you update any part of an atom, then anything that references any part of the atom will get updated

if you want to isolate, i think you have to use a cursor

The reagent session namespace includes functions that use cursors under the hood

(session/get :a) makes use of a cursor, in my above code

oh okay, sorry. i haven’t used it before. let me look to see what else could be causing it.

If I don't make use of the simple-node function, and instead just have the three content components at the top level, they will only re-render when I change their referenced value

does updating session :c make the parent nodes re-render or is it just the parent causing the children to rerender?

All nodes re-render regardless of which value (a, b, or c) I update

Actually, I think I just got it working

I needed to change my use case like so

(defn node-content [path]
  [:p (str (session/get-in path) " " (rand-int 10000))])

[simple-node [node-content [:a]]
    [simple-node [node-content [:b]]
     [simple-node [node-content [:c]]]]]

For some reason, the in-lined 'content' components were not rendering as if they were their own components

Until I made it explicit by defining them as their own function

Thanks for the help 🙂

ohhh right. when you did it the original way, the function calls referencing the session were happening in the render function of whatever was producing that top-level div

so the top-level component was watching everything.

That makes sense

the thing that perpetually confuses me with reagent is that () and [] look very similar but they just don’t evaluate at the same time

Yeah, I'm still getting used to it. Just realized last weekend that we have been using reagent all wrong for months lol

None of the devs on my team are particularly keen to work on front-end, and only used reagent because it came built-in with the luminus template

i feel like there were three hard lessons: atoms vs. cursors, form1 vs form2, and () vs []. once i figured that out, i really like it. but it is yet another library where i think it would be easier to understand if the docs explained what the library is doing under the hood rather than just trying to explain how to use it.

Is it possible to render html comments from hiccup/reagent?

@eoliphant A quick search suggests that in react the only way to do it is to manipulate the dom directly after mount. https://stackoverflow.com/questions/40015336/how-to-render-a-html-comment-in-react/41131326#41131326 You obviously can replicate this technique in reagent. Whether there is a more direct way I don’t know.

Ok, yeah I’d pokedaround some. Was hoping there was something simple lol

thanks

mjmeintjes on #shadow-cljs mentioned that > Using the components is then simple, just use the special :> operator reagent provides, for example [:> Card {} ] Is there some docs about :>? Seems very useful.

It’s pretty straightforward. If you have a reference to the React object you just use it directly.

what’s crazy about it is that i just cloned the entire reagent repository and grepped for it in the code. the only place it exists is (1) docs (2) tests (3) comments

there’s a file that suggests it is just a synonym for adapt-react-class

it’s just bonkers that it doesn’t appear in the api docs and i can’t find its implementation

as an example @mynomoto I have some code that uses the cljsjs packaged version of react-datepicker

...
(:require [cljsjs.react-datepicker] ...
; exposes js/DatePicker so you can..
[:> js/DatePicker {opts...}]

for what it is worth, the only documentation I can find is here (you’ll have to search for it because it is towards the bottom of the page) http://reagent-project.github.io/news/news060-alpha.html

Thanks @eoliphant, @lee.justin.m!