Fork me on GitHub
#reagent
<
2016-12-07
>
gowder20:12:45

Hey folks, does anyone know if there's a canonical strategy for building up components from vectors of data? Like, I'm defining a component to display an excerpt of tabular data from nested vectors this way:

(defn table-display
  [tdata]
  (let [excerpt (take 5 (map #(for [y (take 5 %)] [:td (str y)]) tdata))
        rows (for [x excerpt] [:tr x])]
    [:table rows]))
which is fine except that react generates a warning about elements failing to have unique keys. Is this a serious warning that I should be worried about?

curtosis20:12:49

What I’ve seen is something like adding [:tr {:key x} x]

curtosis20:12:18

whatever you put in {:key …} is something unique you can define based on your iteration

gowder20:12:49

hmm. that's interesting. I could use a uuid or something I guess! (the data might repeat so just using values won't work...)

curtosis20:12:22

there’s usually something natural you can use. It can even be a row number; it just needs to be unique on the page.

curtosis20:12:33

(where “page” means “react s’s sense of the page”)

gowder20:12:42

thanks! after digging through react docs, it sounds like this is mainly for perf reasons ( https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children ); since this isn't a perf-sensitive function at all (it literally will be producing just one 5x5 table at a time), I might not bother. 🙂

curtosis20:12:06

I do it just to clean up my console messages.

curtosis20:12:07

If anyone looked at my problem from yesterday, I’m mostly convinced it’s related to this issue in reagent-forms: https://github.com/reagent-project/reagent-forms/issues/19

curtosis20:12:07

which means I probably can’t use reagent-forms and have to have more complex individual components. sadface

gowder20:12:30

😞 hopefully one of the reagent gurus has a solution for that one for you, like one of the wizards behind reframe maybe!

curtosis20:12:41

I’ve had the thought that maybe I should try re-frame, but so far it seems like a lot of overkill for what I need. I just need to dynamically build up a JSON (well, EDN, but eventually JSON) document.

shaun-mahood21:12:37

@gowder @curtosis : You could also use into instead of for, and then you don't need to worry about the react key. My understanding is that the key is there to make it easier to re-render when you're doing things like reordering elements in a list, so if you're just blowing away and recreating the list then it really doesn't matter. If you started with [:row (for [x data] (render-td x))] (which throws the warning), the equivalent should be something like (into [:row] (map #(render-td %) data)) - it at least gives you an option rather than figuring out your key.

shaun-mahood21:12:17

And nicely, the react key only has to be unique among siblings, not the whole page or anything like that (according to https://facebook.github.io/react/docs/reconciliation.html#keys)

gowder21:12:48

cool, I didn't even realize that into took a starting element

shaun-mahood21:12:46

I replaced a lot of code when I found that out 🙂

michael.heuberger23:12:44

hello folks, curious here if there is a convenient fn to check whether a reagent component is “empty”?

michael.heuberger23:12:58

something like (= comp [])

michael.heuberger23:12:12

(comp/reagent-component?) didnt work for me

noisesmith23:12:29

michael.heuberger what about empty?

noisesmith23:12:11

at least (empty? []) returns true