cljsrn

https://github.com/drapanjanas/re-natal | https://github.com/drapanjanas/re-natal/wiki/FAQ | https://github.com/condense/mercury-app/wiki | https://github.com/seantempesta/expo-cljs-template/ https://www.npmjs.com/package/create-expo-cljs-app
zendevil 2021-01-28T06:03:35.011700Z

I’m getting an “encountered children with the same key ‘null’, with the following code:

(defn video-comp [video]
  [:> View {:key (get video "uri")}
   [:> Video
    {:style {:height 400
             :width "100%"}
     :controls true
     :paused true
     :source {:uri (str "<https://d211alragp6msc.cloudfront.net/>" (get video "uri"))}}]
   #_[:&gt; Text {:style {:fontSize 20}} (get video "name")]
   #_[:&gt; Text (get video "description")]])

(defn home []
  (dispatch [:load-videos])
  [:&gt; SafeAreaView {:marginBottom 100}
   [:&gt; Button {:title "Refresh" :onPress #(dispatch [:load-videos])}]
   [:&gt; FlatList {:data @(subscribe [:videos])
                 :renderItem (fn [item] (r/as-element [video-comp (get (js-&gt;clj item) "item")]))
                 :keyExtractor (fn [item] (-&gt; (get (js-&gt;clj item) "item")
                                              (get "uri")))}]
   [google-signout-comp {:key :signout}]])
I don’t use map in this code so I don’t understand why the code will complain about children with the same key null. I don’t know what children the warning message refers to. I’ve tried adding keys to the video-comp component as shown, to no avail. How to fix this warning?

2021-01-28T07:52:16.014800Z

@ps The message come from the :keyExtractor line in your home component. Tried something like that:

...
:keyExtractor (fn [item] (str (get-in (js-&gt;clj item) ["item" "uri"])))}]
...

zendevil 2021-01-28T12:51:10.019Z

How is it different from what I have already?

zendevil 2021-01-28T13:03:06.019200Z

@admin055 i tried this but I still get the warning

2021-01-28T14:21:20.020800Z

First, ii use get-in to access nested map instead thread marco + get and second it converts the result in string with str.

2021-01-28T14:23:47.021100Z

Please, print out the item object and paste the result here with

...
:keyExtractor (fn [item] (js/console.log item)))}]
...

2021-01-28T14:29:58.021400Z

Or more directly, copy/paste the state return by @(subscribe [:videos])

2021-01-28T07:52:53.015500Z

You can remove your video-comp :key line.

raspasov 2021-01-28T09:47:00.018600Z

@ps Take a look here: https://github.com/raspasov/alexandria-clj/blob/a68ef10ca1104d9f74380265818cb22fd328499c/src/ax/react_native/virtualized_list.cljs Specifically, :getItem and :keyExtractor I prefer to use VirtualizedList directly, because it allows to use custom data sources (like ClojureScript’s immutable vectors) directly without transformation. It does require a bit of setup initially but works well afterwards.

👍 4
zendevil 2021-01-28T13:03:47.020100Z

@raspasov I don’t understand, clojurescript data structures can be passed into flatlist as well in the :data key

zendevil 2021-01-28T13:04:28.020600Z

in any case is there a way to get rid of the warning using a flatlist?

joshmiller 2021-01-28T18:00:19.022700Z

@ps The :key-extractor in my FlatList is (comp str :uuid cljify) where cljify is (js-&gt;clj % :keywordize-keys true)

👍 1