Skip to content


Subversion checkout URL

You can clone with
Download ZIP


sgrove opened this Issue · 6 comments

4 participants


Something about the way Sablono is rendering makes it extremely difficult know when a key is required or not to avoid the warning: Each child in an array should have a unique "key" prop. Check the render method of undefined., and of course the massive performance penalty that goes along with it.

For example, in the following:

[:li.file_item {:key (:src media)}
      {:key "a" ;; If this key isn't here, we get the warning
       :href "#"
       :on-click (constantly false)
       :target "_blank"}
      [:img {:key "img" :src (str "/assets/images/" (get icon-map extension "file") "_icon.png")}]
      [:span {:key "span"} (:name media)]]]

The [:a] tag has no siblings, but React is seeing the children of [:li] as an array with one element:


The current solution is to litter :key and :react-key entries everywhere (on sablono-tags and om-components, respectively) in a very-difficult-to-track-down way. Not 100% sure of the causes yet.


I'm not sure what the problem is here. The code snippet above
doesn't generate a warning for me, even if I remove all :key
attributes. You certainly don't have to litter :key
and :react-key attributes everywhere. Have you read:


Sean and I were talking about this earlier and I hacked together a bare-bones example that seems to display the problem:

(ns test.core
   [dommy.macros :refer [node sel sel1]])
   [dommy.utils :as utils]
   [dommy.core :as dommy :refer [attr]]
   [om.core :as om :include-macros true]
   [om.dom :as omd :include-macros true]
   [sablono.core :as html :refer [html] :include-macros true]))


(defn inner-component
  [{val :val} owner]
    [:li val])))

(defn main-sablono
  [{:keys [some-coll]} owner]
      (om/build inner-component (first some-coll))]
      (om/build-all inner-component some-coll)]
      (om/build-all inner-component some-coll {:key :id})]])))

(defn main-plain
  [{:keys [some-coll]} owner]
    (omd/ul nil (om/build inner-component (first some-coll)))
     omd/ul nil
     (om/build-all inner-component some-coll))
     omd/ul nil
     (om/build-all inner-component some-coll {:key :id})))))

(def my-data (atom {:some-coll [{:id 1 :val "foo"}
                                {:id 2 :val "bar"}]}))

(defn load!
  (let [root-el (sel1 :#root)]
    ;; (om/root main-plain my-data {:target root-el})))
    (om/root main-sablono my-data {:target root-el})))

(set! (.-onload js/window) load!)

If I run the example with the main-sablono component, I see this warning:

Each child in an array should have a unique "key" prop. Check the render method of undefined. See for more information. 

If I comment out these lines from the main-sablono component (that is, the center ul):

    (om/build-all inner-component some-coll)]

...the warning goes away.

If I use the main-plain component instead of main-sablono, the warning does not show up.

The dependencies in project.clj are:

  :dependencies [[org.clojure/clojure "1.5.1"]
                 [org.clojure/clojurescript "0.0-2173"]
                 [om "0.5.0"]
                 [prismatic/dommy "0.1.2"]
                 [sablono "0.2.6" :exclusions [org.clojure/clojurescript]]]

  :plugins [[lein-cljsbuild "1.0.2"]]

From reading the React docs and Om source-code, it seems like build never tries to pass in a key if the m options map is nil. However, if build gets passed an options map, it will attempt to set the :key value from the options map.

It seems to me actually that Om's default dom helpers would display the same issue that Sean found, but apparently that's not the case. This is as far as I've gotten debugging the issue, but I'll take another look tomorrow when I have time. In the meantime hopefully this helps someone else figure out what is going on...


Can we close this? Is this a problem with sablono?


Closing this now ...

@r0man r0man closed this

Yeah, leaving it up to sgrove if he wants to try digging deeper on this...I'm happy to help if so.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.