cljsrn 2021-01-28 | Slack Archive

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 "" (get video "uri"))}}]
   #_[:> Text {:style {:fontSize 20}} (get video "name")]
   #_[:> Text (get video "description")]])

(defn home []
  (dispatch [:load-videos])
  [:> SafeAreaView {:marginBottom 100}
   [:> Button {:title "Refresh" :onPress #(dispatch [:load-videos])}]
   [:> FlatList {:data @(subscribe [:videos])
                 :renderItem (fn [item] (r/as-element [video-comp (get (js->clj item) "item")]))
                 :keyExtractor (fn [item] (-> (get (js->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?

Michaël Salihi07:01:16

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

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

zendevil.eth12:01:10

How is it different from what I have already?

zendevil.eth13:01:06

@UFBL6R4P3 i tried this but I still get the warning

Michaël Salihi14:01:20

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

Michaël Salihi14:01:47

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

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

Michaël Salihi14:01:58

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

Michaël Salihi07:01:53

You can remove your video-comp :key line.

raspasov09:01:00

@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.

👍 12

zendevil.eth13:01:47

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

zendevil.eth13:01:28

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

joshmiller18:01:19

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

👍 3

2021-01-28

Channels