Fork me on GitHub

I’ve been able to replicate this dx-react-grid code ( and trying to extend to track row selection with <Table rowComponent={TableRow}/> from the example at the bottom here: New to React - and not sure how to translate this code

const TableRow = ({ row, ...restProps }) => (
    // eslint-disable-next-line no-alert
    onClick={() => alert(JSON.stringify(row))}
      cursor: 'pointer',
to reagent. Thoughts?


that should translate pretty well. i think you can just define TableRow as a defn which returns [:> js/dxobject.Table.Row {props here}]


Hmm.. I’m a beginner - not sure how to interpret js/dxobject.Table.Row …?


oh sorry. so somehow you have to import the library into your cljs code


if you include it via a script tag or using :foreign-libs, there will be a global object somewhere that has all the goodies hooked on it. i don’t know what that library uses.


if you use something like shadow-cljs, it will get imported with its own namespace


i’m not sure how you are importing


@lee.justin.m - I’m using shadow-cljs — and have pulled in the npm libraries - and can access Table via ["@devexpress/dx-react-grid-bootstrap3" :refer [Grid Table TableHeaderRow TableSelection]]


not sure about Table.Row


okay so you’ll do something like [:> Table.Row {props}]


when you import Table, it is a javascript object. the clojurescript language allows you to stick dots in the middle of symbols and it just works (basically the dotted code just gets passed directly into javascript).


Table.Row is just accessing the Row prop from the Table object


And Table.Row is also a class? I’m converting Table via

(defn factory-apply
  "A function for wrapping a js React class in a factory."
  (fn [props & children]
    (apply js/React.createElement


But doesn’t work for Table.Row


try (.-Row Table)


maybe the dotted notation doesn’t work


Thanks - trying that… And yeah - I am using fulcro - but the original sample was in reageant 🙂.


okay yea so forget all that stuff about [:>...] because that’s reagent specific


Yeah - I knew that much from your article 🙂.

Tim Wade18:02:27

@lee.justin.m I'm just follow up from yesterdays conversation in #clojurescript , moving in here

Tim Wade18:02:52

I'm trying to understand why when I mutate the object I'm storing in my atom there, it's doesn't render the updated value in the UI component. If I "touch" the atom by also inserting some random data in it, it works

Tim Wade18:02:46

I'm assuming that since the object is preserved, it's just mutated, it's seen as equivalent - is there a pattern for dealing with something like this?


yea that what i would expect but i’m trying to think about what the “right” way to fix it is. the set! doesn’t change the actual atom


right. so the set! alters something deep inside the data object, but react will do a shallow compare on data, which of course looks like it hasn’t changed


here is what I would do: I would just store the frequency as a clojurescript inside the reagent/atom directly. then I would consider doing an add-watch on the atom and doing the set! there so that they are always in sync. you’ll need to remove-watch when the component unmounts too. now, when you update the frequency, your component will update and so will the javascript library


i suspect you can use a reaction or maybe the track function. but that stuff is sadly undocumented and I do not know how to use it practically. i feel like this is a perfect case for some of that functionality

Tim Wade18:02:39

Oooh, many thanks!


you can also just do it the easy way: instead of storing a random number, store the frequency in the atom and then do the set! code right next to it

Tim Wade18:02:29

I will play around with that! If I find something that works that's undocumented, I'll try to help document it 😉

Tim Wade18:02:05

Ah yeah I thought about doing that, but something about that made me think, I'm doing this wrong ™️


this is what i’ve collected from the realese notes

Tim Wade18:02:43

😻 this is great!


storing it twice is a code smell yea because what if they get out of sync. on the other hand, sometimes quick and dirty works for simple code.


this is a little of the blind leading the blind thought 🙂

Tim Wade18:02:17

It will....but I plan on having a lot more such things 😉


anyway i need to step out for a bit but good luck and let us know how it goes

Tim Wade18:02:26

Not at all....very enlightening!

Tim Wade18:02:37

I will! And thanks once again!


@hello721 another way to keep things in sync is to use a form-3 component and use :component-did-update and :component-will-mount. Basically, your outer component is the viewable UI and has frequency as a cljs structure in an atom. then you render the form-3 component and pass frequency as a prop. the form-3 component will own the sound generating stuff and will update it when new props come in


that’s much much simpler and better contained

Tim Wade19:02:00

@lee.justin.m interesting! I'll have to do some research into form-3 components, but that does sound very promising!


also described in that gist i sent you and also in the /docs folder of reagent github. read the react docs too if you’ve never used before.

Tim Wade20:02:40

Will do, thanks!