Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs (ClojureScript)

Code before:
        key      (deref key*)
        mixed-label (tr "settings.multiple")

        switch-component
        (mf/use-fn
         (mf/deps shapes)
         (fn [pos val]
           (if (= val mixed-label)
             (reset! key* (uuid/next))
             (let [error-msg (if (> (count shapes) 1)
                               (tr "workspace.component.switch.loop-error-multi")
                               (tr "workspace.component.swap.loop-error"))
                   mdata     {:on-error #(do
                                           (st/emit! (ntf/error error-msg))
                                           (reset! key* (uuid/next)))}
                   params    {:shapes shapes :pos pos :val val}]
               (st/emit! (dwv/variants-switch (with-meta params mdata)))))))]

    [:*
     [:div {:class (stl/css :variant-property-list)}
      (for [[pos prop] (map vector (range) props-first)]
        (let [mixed-value? (not-every? #(= (:value prop) (:value (nth % pos))) properties)
              options (cond-> (get-options (:name prop))
                        mixed-value?
                        (conj {:id mixed-label, :label mixed-label :dimmed true}))]
          [:div {:key (str (:id shape) pos mixed-value?)
                 :class (stl/css :variant-property-container)}

           [:div {:class (stl/css :variant-property-name-wrapper)
                  :title (:name prop)}
            [:div {:class (stl/css :variant-property-name)}
             (:name prop)]]

           [:div {:class (stl/css :variant-property-value-wrapper)}
            [:> select* {:default-selected (if mixed-value? mixed-label (:value prop))
                         :options options
                         :empty-to-end true
                         :on-change (partial switch-component pos)
                         :key (str (:value prop) "-" key)}]]]))]

     (if (seq malformed-comps)
       [:div {:class (stl/css :variant-warning-wrapper)}
        [:> icon* {:icon-id i/msg-neutral
                   :class (stl/css :variant-warning-darken)}]
        [:div {:class (stl/css :variant-warning-highlight)}
         (tr "workspace.options.component.variant.malformed.copy")]
        [:button {:class (stl/css :variant-warning-button)
                  :on-click select-malformed-comps}
         (tr "workspace.options.component.variant.malformed.locate")]]

       (when (seq duplicated-comps)

Review comment (suggestion):
The key should be unique on the iteration, i think with `pos` is more than enough for the key, so you can remove the string concat operation and replace it with just using `pos`

Code after:
        key      (deref key*)
        mixed-label (tr "settings.multiple")

        switch-component
        (mf/use-fn
         (mf/deps shapes)
         (fn [pos val]
           (if (= val mixed-label)
             (reset! key* (uuid/next))
             (let [error-msg (if (> (count shapes) 1)
                               (tr "workspace.component.switch.loop-error-multi")
                               (tr "workspace.component.swap.loop-error"))

                   mdata     {:on-error #(do
                                           (reset! key* (uuid/next))
                                           (st/emit! (ntf/error error-msg)))}
                   params    {:shapes shapes :pos pos :val val}]
               (st/emit! (dwv/variants-switch (with-meta params mdata)))))))]

    [:*
     [:div {:class (stl/css :variant-property-list)}
      (for [[pos prop] (map vector (range) props-first)]
        (let [mixed-value? (not-every? #(= (:value prop) (:value (nth % pos))) properties)
              options (cond-> (get-options (:name prop))
                        mixed-value?
                        (conj {:id mixed-label, :label mixed-label :dimmed true}))]
          [:div {:key (str pos mixed-value?)
                 :class (stl/css :variant-property-container)}

           [:div {:class (stl/css :variant-property-name-wrapper)
                  :title (:name prop)}
            [:div {:class (stl/css :variant-property-name)}
             (:name prop)]]

           [:div {:class (stl/css :variant-property-value-wrapper)}
            [:> select* {:default-selected (if mixed-value? mixed-label (:value prop))
                         :options options
                         :empty-to-end true
                         :on-change (partial switch-component pos)
                         :key (str (:value prop) "-" key)}]]]))]

     (if (seq malformed-comps)
       [:div {:class (stl/css :variant-warning-wrapper)}
        [:> icon* {:icon-id i/msg-neutral
                   :class (stl/css :variant-warning-darken)}]
        [:div {:class (stl/css :variant-warning-highlight)}
         (tr "workspace.options.component.variant.malformed.copy")]
        [:button {:class (stl/css :variant-warning-button)
                  :on-click select-malformed-comps}
         (tr "workspace.options.component.variant.malformed.locate")]]