Fork me on GitHub
John Oerter03:08:00

The reagent docs have this code example:

(defn lister [items]
   (for [item items]
     ^{:key item} [:li "Item " item])])
Can anyone explain the ^{:key item} part to me? I know that it is adding the key attribute for a list in React, but I don't quite understand the Clojure/Reagent syntax part of how this is working

John Oerter03:08:26

It seems like this is Reagent metadata?


It’s syntax for adding metadata to the vector being constructed


Reagent checks a few places for keys when converting a vector into a React element


One is props , so you could just pass in the key like any other prop


Another is metadata on the vector


to be clear, ^{:foo bar} is vanilla clojure, and puts a metadata map onto a collection or symbol, but reagent has a special interpretation of specific metadata keys


^:foo is often seen, it translates to ^{:foo true}


you can combine them

ins)cljs.user=> (def m ^:foo ^{:bar false} {})
(ins)cljs.user=> m
(ins)cljs.user=> (meta m)
{:bar false, :foo true}

John Oerter13:08:50

Ah that makes sense. Thanks @U4YGF4NGM and @U051SS2EU