clojureclojurescriptre-frame

Why is the ^ character used in this ClojureScript snippet?

In the clojurescript re-frame todomvc application we find the following snippet in the todomvc.views namespace.

(defn todo-list
  [visible-todos]
  [:ul.todo-list
   (for [todo  @visible-todos]
     ^{:key (:id todo)} [todo-item todo])])

Although I have read the Clojure chapter on metadata I don't quite understand the purpose of:

^{:key

in the snippet above. Please explain.

Solution

  • The :key is what React needs when you have many items, so that they can be unique within the group. But the latest version of React does not need these keys. So if you use the latest versions of reframe / Reagent, just try without the :key metadata.

    This metadata is equivalent to placing :key within the component. So for example what you have is equivalent to: 

    [todo-item {:key (:id todo)} todo]

    Using the metadata approach is a convenience, which must in some cases be easier than the 'first key in props passed to the component' approach.

    Here's more explanation.