CODEWITHSUNDEEP
clojureclojurescriptreagent
Christopher Shroba
Christopher Shroba

Reputation: 7554

Putting data in a table in Clojurescript reagent

I'm building a ClojureScript app and I'm having trouble with using reagent to fill a table with data. The two issues I'm having are TONS of warnings of the form

Every element in a seq should have a unique :key

And also, as soon as I call the function that does the rendering, it renders correctly, then my entire page freezes and reloading the page is the only way to fix it. These are my two functions:

(defn foo
  []
  [:table
   (for [i (range 10)]
     [:tr (for [j (range 3)]
            [:td (str "Row " i ", Col " j)])])])

And when I call the following, I get the warnings and the page freezes, though it does render correctly:

(reagent/render [foo] (dom/getElement "results"))

Am I approaching the process of filling in data the wrong way? Is there an easier way?

Upvotes: 1

Views: 2030

Answers (1)

Tim X
Tim X

Reputation: 4235

The warning you are getting is due to reagent requiring a unique key value for dynamic elements created along these lines. There are a couple of ways you can fix this. The other thing you need to watch out for is possible issues with using for because it generates lazy sequences. While this is working for you in this context, it can create subtle issues with re-rendering.

My advice would be to create a function to render the td element and prefix the rendering with 

^{:key (str i j)} [:td (str "Row " i ", Col " j)]

The (str i j) will create a unique key for each td element. The other thing I find useful is to use into i.e.

(into [:tr]
  (for [j (range 3)]
    ^{:key (str i j)} [:td ....])))

I've been developing my own app using reagent. It isn't great code and it still needs a lot of re-factoring, but I have done tables like this as well as paginated tables and a few other reagent components, such as tabs, sidebar menus etc. It can be found at my github arcis project It should give you some ideas if nothing else

There is also some good documentation regarding reagent and how it does rendering and some of the subtle 'gotchas' at re-frame wiki

Upvotes: 4

Related Questions