Fork me on GitHub
#reagent
<
2021-07-16
>
zackteo09:07:37

Hello, I am getting the following error Each child in a list should have a unique "key" prop. and i understand I need to supply a unique key https://stackoverflow.com/questions/33446913/reagent-react-clojurescript-warning-every-element-in-a-seq-should-have-a-unique If I do the following ... where should I supply ^{:key (gen-key)} or should I be using a for (map site-detail-component (:site-details result))

(defn site-detail-component [site-detail]
  [v-box
   :style {:background "#eee" :border-radius "10px" :border "2px solid #F0F0F0" :padding "5px"}
   :margin "5px 0px"
   :children [[title :label (str/join " " ["Site" (:gid site-detail)]) :level :level3]]])

p-himik09:07:24

for and map are both lazy so they work the same way in this case. You should supply :key right within the loop's body:

(map (fn [args]
       ^{:key (get-key-from-args args)}
       [child-component args]))
If there's no way to compute unique and stable key from the arguments, just use into or mapv to remove any laziness.

juhoteperi09:07:07

Might be related to how v-box handles children in this case.

p-himik09:07:39

Ah, site-detail-component is a plain function in your case @UUSQHP535, not a component. If you're using it like that, you should rename it IMO and then move :key right in front of [v-box ...].

juhoteperi09:07:40

Aha, didn't notice the map snippet. (map (fn [v] ^{:key (:gid v)} [site-detail-component v]) ...) but using for might be clearer.

2
juhoteperi09:07:19

"plain function": instead of Reagent creating a React component from site-detail-component, the function is called in parent component render and the resulting hiccup forms are placed into the parent component. So the site-detail-component wouldn't have its own lifecycle either. Instead of calling it (from map or elsewhere) you need to return hiccup vector form with the fn as first element to use fn as component.

zackteo10:07:49

sorry, I think I should know this but what would be considered as components then?

p-himik10:07:51

Hiccup vectors are recursively converted into React class/function components. If you use (f) that returns [:div ...], then there will be a React element for that div. If you use [f], then there will be a React class/function component for f, and corresponding React elements will use that component. Here's the relevant documentation: https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md