Clojurians Log v2

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

(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"]])

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)

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)])

Similarly, using the into solution

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

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

Yes before it was

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

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

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

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

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.

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

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

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.

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

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

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