re-frame 2022-03-08 | Slack Archive

fadrian18:03:31

I am using a re-com single-dropdown component in a re-frame SPA. The choices in the dropdown are a collection of strings. However, when I click on the dropdown, rather than getting the list of choices, I get a console warning and the list does not drop down:

Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

This seems odd, because I am not adding any :key metadata onto the elements in the choice list (nor could I - one cannot add metadata to strings). Any idea why I am getting this error and how to prevent it?

p-himik19:03:24

How exactly do you use it?

fadrian20:03:38

I am using this code to render the dropdown:

(defn dropdown
  [choices id init attrs]
  (set-up-reactivity :on-dropdown-change :dropdown-state) ;This call registers events
  (rf/dispatch-sync [:on-dropdown-change id init]) ;This sets the initial state of the dropdown in the db.
  (fn
    []
    (let [comp (merge-component-attrs ;This merges attrs into the component definition below.
                [single-dropdown
                 :src (at)
                 :choices choices
                 :model (nil-safe-deref (rf/subscribe [:dropdown-state id]))
                 :on-change #(rf/dispatch [:on-dropdown-change id %])
                 :width "200px"]
                attrs)]
      [:div.dropdown comp]))) ;This displays the component in a div that's given a class for CSS'ish stuff

I am calling the dropdown in my code as follows:

(let [id gensym] [dropdown (mapv :template-name edn-apis) id nil])
; edn-apis is a vector of maps that contain a :template-name key whose value is a string.

The resulting single-dropdown in the [:div] is embedded into a re-com simple-v-table's cell.

p-himik20:03:19

> The choices in the dropdown are a collection of strings. By default, re-com requires you to provide a sequence of maps, it's documented. If you need to use strings, you have to provide custom :id-fn and :label-fn. Also, avoid using rf/dispatch or rf/dispatch-sync (or any other side-effects, really) in views. Re-frame documentation goes into details on why and how to do that.

fadrian20:03:20

I'll take a closer look at the documentation.

fadrian20:03:30

Thanks for your advice.

👍 1

2022-03-08

Channels