those are some good points, thanks

I misspoke when I said this.state.props, I meant this.props or very occasionally this.props.state

tracking information between different components

to try to describe the issue I was having, I have a div that renders messages by saying

[:div.panel.messages {:ref #(swap! board-dom assoc :message-list %)}
 (doall (map-indexed
          (fn [i msg]
            [:div ...build messages here...])
          @log))]

I have that :ref there so when the messages are re-rendered, I can see the changes and react (lol) to them

my goal for this is to have normal "sticky" auto-scrolling: if I send a message, scroll to the bottom. if I receive a message and I'm scrolled to the bottom, scroll to the bottom. if I receive a message and I've scrolled up at all, don't scroll to the bottom.

Is there a smarter way to achieve this with reagent?

I'm still not sure I completely understand. I get: - you have a list of messages - when you render a new message, scroll (maybe) Not sure why you need a ref for this. Ah unless you're scrolling to the top or bottom of the panel itself? Not the page

yeah, just that panel

i inherited this codebase, lol, it's kind of a nightmare

Okay. Yeah that seems like a fine way to keep track of the ref

https://github.com/mtgred/netrunner/blob/0c4ba6cc42d69dc79cb3531e39366b21742e6b0f/src/cljs/nr/gameboard.cljs#L344 if you want the actual source

What was the question about props?

i think my question about props was me misunderstanding some stuff. reading through the react docs, it seemed like I could check props to see what's changing in a given update, and use that information to determine whether I scroll or not

Yikes

Ah yes maybe

So my confusion was that I assumed you were using functions for your component

This is using the create-class API which is very raw

do you have any suggestions or tutorials on how I could rewrite these things to be less... terrible?

I mean it might be warranted. I'm not sure

But I always cringe when you have to use create-class with a bunch of atoms... It gets too messy. But I see some jQuery and other imperative things that might be necessary in order to get the desired behavior, so maybe it's worth it?

Reagent,like react, can reads props and render accordingly. Just to clear that up

This was originally written with Om and then ported/translated/rewritten with reagent about a year ago, so who knows what was written back then?

How do you read the props?

inside of a create-class I think there’s an r/props function

I was assuming that you were talking about a reagent component like:

(defn log-page [props]
   ... etc)

in which case it’s like yeah duh it’s easy to read props! 😅

ha yeah, I wish! That would make this very easy. I feel like the reagent github page tutorial/docs aren't super detailed and make it hard to know how to translate react tutorials/docs to reagent

yeah that makes sense

reagent tries to paper over React with it’s reagent-y-ness… this project you’re working on, the code is kind of in both worlds

you’ve got all of the imperative parts of React plus the mutable parts of reagent and it’s… fun!

Extremely fun!

Outside of these specific questions I have, do you have any recommendations for tutorials or guides that I could use to help me better learn Reagent's flow/ideas?

at work, many of us were new to both ClojureScript and Reagent, and I think some really enjoyed https://www.learnreagent.com/

there are free and paid sections

Thanks, I'll check that out! I appreciate your help

Reading that page, I have a new question! The Counter example is sweet, except in React you can create multiple instances of the Counter component, each with their own state. Does creating the click-counter atom with a def (making it namespace global) allow you to create multiple counting-components?

no, if you def it, it’s using global state therefore you can’t create multiple instances that have different state

however, you can bind it locally using what’s called a “form-2” component:

(defn counting-component []
  (let [click-count (r/atom 0)]
    (fn []
      [:div "The state has a value: " @click-count
       [:input {:type "button" :value "Click me!" :on-click #(swap! click-count inc)}]])))

and that ☝️ counting-component can be re-used and each instance will have their own local component state

Ah sick, that's great. Thank you! (What's "form-2"? Looks like I have a lot to learn, lol)

https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md#form-2--a-function-returning-a-function

idk how i missed that! you're a champ

🙇