reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
John Oerter 2020-08-05T03:03:00.127400Z

The reagent docs have this code example:

(defn lister [items]
  [:ul
   (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 Oerter 2020-08-05T13:46:50.132300Z

Ah that makes sense. Thanks @lilactown and @noisesmith

2020-08-09T11:37:21.153900Z

Ah nice I always just passed it into the props

2020-08-09T11:37:43.154100Z

Any reason to prefer setting the meta data instead?

lilactown 2020-08-09T17:05:30.156900Z

Not for html elements like :li. If you’re using a component you’ve defined, then you might not have a place to set those props. E.g. [some-component foo bar] In this case there’s no props map to pass a key to, so you’ll want to use metadata

2020-08-10T15:06:38.162900Z

ah right makes sense thanks

John Oerter 2020-08-05T03:15:26.127500Z

It seems like this is Reagent metadata?

lilactown 2020-08-05T03:23:51.128300Z

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

lilactown 2020-08-05T03:24:15.129200Z

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

lilactown 2020-08-05T03:24:36.130Z

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

lilactown 2020-08-05T03:24:45.130400Z

Another is metadata on the vector

2020-08-05T03:44:49.130600Z

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

1
2020-08-05T03:45:45.130800Z

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

2020-08-05T03:46:43.131Z

you can combine them

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

EmmanuelOga 2020-08-05T06:08:12.131300Z

yeah I feel some of the docs are just outdated, thing is, when learning, it is hard to determine which thing is wrong