reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
jaime 2021-01-23T11:03:27.003500Z

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

frankitox 2021-01-26T20:32:21.018200Z

@jaime.sangcap , 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.

jaime 2021-01-28T09:46:10.021900Z

Thank you for sharing. Will do some reading

p-himik 2021-01-23T11:07:21.003600Z

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)

jaime 2021-01-23T11:14:11.003900Z

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

jaime 2021-01-23T11:15:02.004100Z

Similarly, using the into solution

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

p-himik 2021-01-23T11:16:17.004300Z

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

jaime 2021-01-23T11:16:55.004500Z

Yes before it was

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

p-himik 2021-01-23T11:17:54.004700Z

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

jaime 2021-01-23T11:21:29.005300Z

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

jaime 2021-01-23T11:28:29.005500Z

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

p-himik 2021-01-23T11:35:40.005800Z

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-himik 2021-01-23T11:36:38.006100Z

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

1👍
vlad_poh 2021-01-23T19:15:29.006800Z

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

kari 2021-01-24T10:20:51.008500Z

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

vlad_poh 2021-01-27T01:40:51.018600Z

oh cool will give it a try

p-himik 2021-01-23T19:19:20.006900Z

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-himik 2021-01-23T19:19:53.007100Z

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

vlad_poh 2021-01-23T19:33:30.007300Z

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-himik 2021-01-23T19:38:50.007500Z

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

1👍