Clojurians Log v2

components themselves do not have to handle :key. React handles the key prop specially

the code you pasted looks correct on a skim, so I'm not sure why it would cause a "unique key" warning. perhaps it's in some other part of the code?

above you mentioned ^{:key (str i)} - this only works in Reagent when using the vector syntax. This attaches metadata to the vector which reagent then uses to attach the key to the underlying React element. it won't work in helix using $

Thank you @lilactown. I am stumped as to why I am getting this error.

are you sure it's pointing at this specific code?

I will double-check, but the error refers to MapPolygons specifically, I have ns’ed it as Polygon

I would also investigate other potential issues, like problems with code reloading and build caching

Solved. I did not require the polygon component correctly.

In the map with the props add an :key i

The props for Polygon ? I tried that, without success.

Do you have another component doing the same map-indexed and using i as key? If so try appending the component name in the key like :key (str "polygon" i)

I do not have another component like that. I have tried: • Putting ^{:key (str i)} in front of the ($ Polygon …) • Adding a :key (str i) to the props

Maybe wrap Polygon with a div and add the key on the wrapping div

For me usually just adding the key in the components works for me

I can try that…Thanks @rafaeldelboni

I’ve always fixed this warning by adding the key prop to the component like so:

(map-indexed (fn [i coordinates]
                         ($ Polygon {:key i
                                        :coordinates (clj->js coordinates)
                                        :strokeWidth 2
                                        :strokeColor "green"
                                        :fillColor "rgba(0,128,0,0.5)"}))
                       polygons)

Thanks @rayatrahman9. I need to explain more fully: This is React Native, not React. I cannot put this particular component in a div because it is a child of MapView. Here’s the full component:

(defnc YardView
  [{:keys [drawing setLocationChanged] :as props}]
  (let [map-ref (hh/use-ref nil)
        location  (log/spy (use-sub [:yard/location]))
        zoom  (log/spy (use-sub [:yard/zoom]))
        polygons (use-sub [:yard/polygons])
        camera (hh/use-memo
                [location zoom]
                (util/to-js
                 {:center location
                  :zoom zoom
                  :pitch 0
                  :heading 0}))]
    ($ rn/View {:style {:flex 1}}
       ($ MapView
          {:ref map-ref
           :camera  (log/spy camera)
           :provider "google"
           :mapType "hybrid"
           :onRegionChangeComplete
           (fn [event options]
             (let [{:keys [is-gesture]} (util/from-js options)]
               (when is-gesture
                 (-> ^js (.getCamera map-ref.current)
                     (.then (fn [camera]
                              (let [{center :center
                                     zoom :zoom} (util/from-js camera)]
                                (dispatch [:yard/set-location center])
                                (dispatch [:yard/set-zoom zoom])
                                (setLocationChanged true))))))))
           :style (j/get styles :map)}
          (map-indexed (fn [i coordinates]
                         ($ Polygon {:key (str i)
                                     :coordinates (clj->js coordinates)
                                     :strokeWidth 2
                                     :strokeColor "green"
                                     :fillColor "rgba(0,128,0,0.5)"}))
                       polygons))
       (when drawing
         ($ Canvas {:mapRef map-ref})))))

ah crap, have no experience with react native, does that need or use the key prop?

Yes, it does.

It looks like the Polygon is ignoring the :key input, but I don't have experience with react native neither. Do you have an dummy / empty component that you could use, that you sure it handles the :key?

Let me see.