Fork me on GitHub
#reagent
<
2021-01-23
>
jaime11:01:27

Hi all, I'm using reagent with react-native... I'm getting this warning

Warning: Every element in a seq should have a unique :key: ([#object[reagent.impl.template.NativeWrapper] "Sangcap"])
 (in limeray.component.spacer) 
limeray.component.spacer
RCTView
limeray.component.stack
limeray.main.my_home
In below code, I'm expecting that I only have to put unique `key` when I dynamically generate/iterate items. Where did I miss the unique key in this example? components are in different files, but put them altogether in below example...
(def view (r/adapt-react-class rn/View)) ;; react-native View component
(def text (r/adapt-react-class rn/Text)) ;; react-native Text component

(defn spacer [{:keys [space]} & children]
  [view {:style {:marginTop 10}} children])

(defn stack [& children]
  [view {:style {:flexDirection "column"
                       :marginBottom 10}}
   (for [[index item] (map-indexed vector children)]
     ^{:key index} [spacer {:space :2} item])])

(defn my-home []
  [stack
   [text "Jaime"]
   [text "Sangcap"]])

p-himik11:01:21

for is the culprit. An easy fix would be to avoid using lazy collections in Hiccup:

(into [view {...}]
      (map-indexed (fn [index item] [spacer {:space :2} item]))
      children)

jaime11:01:11

I'm still getting the warning after using your example. Could it be because of spacer using & to get the children? WHen I add (first children) in the spacer. Warning goes away

(defn spacer [{:keys [space]} & children]
  [view {:style {:marginTop 10}} (first children)])

jaime11:01:02

Similarly, using the into solution

(defn spacer [{:keys [space]} & children]
  (into [view {:style {:marginTop 10}}] children)

p-himik11:01:17

Were you just using [view {...} children] before?

jaime11:01:55

Yes before it was

(defn spacer [{:keys [space]} & children]
  [view {:style {:marginTop 10}} children])

p-himik11:01:54

Ah, then I should correct myself above. "An easy fix would be to avoid using lazy collections seqs in Hiccup".

jaime11:01:29

If I understand correctly, because list of vector is not a valid reagent/hiccup form? First element of vector should be keyword or symbol?

jaime11:01:29

Appreciate your help solving the issue, I think I should use into from now on 🙂 Thanks a lot! 😁

p-himik11:01:40

IIRC Reagent is clever enough to unwind seqs. It's just that the manner in which it does it requires you to specify :key. Unfortunately, I don't remember any more details.

p-himik11:01:38

And yeah, into is a savior here. There are 0 reasons to use lazy collections in Hiccup.

👍 3
frankitox20:01:21

@UNL0HK5ME , in other cases it might be handy to wrap the for in a doall. There's more info about it https://purelyfunctional.tv/guide/reagent.

jaime09:01:10

Thank you for sharing. Will do some reading

vlad_poh19:01:29

How do you style reagent if you don't know any css.

p-himik19:01:20

Even if you use some extensive UI framework that allows you to specify every single styling parameter via props, you will still encounter the need to write some sort of CSS (vanilla CSS, SASS, CSS-in-JS, whatever) eventually.

p-himik19:01:53

With that being said, Reagent doesn't have any tools built into it to magically allow you to forgo all CSS altogether. :)

vlad_poh19:01:30

ui frameworks are so unwieldy. I can't build any intuition and it is incredibly frustrating. re-com looks like what i need but can't find a good tutorial

p-himik19:01:50

Why do you need a tutorial? Just go through its demo website and you should be good to go.

👍 4
Kari Marttila10:01:51

I used https://bulma.io/ with my latest Reagent/re-frame exercise, needed hardly any custom CSS outside Bulma.

vlad_poh01:01:51

oh cool will give it a try