A reagent-interop problem in Electric

[philoskim]

I encountered a problem on reagent-interop in Electric.

The following is the code I tweaked the existing code in Electric to show the problem.

(e/defn ReagentInterop []
  (e/client
    (e/for [index (range 3)]  ;; <-- here
      (dom/h1 (dom/text (str "Reagent/React Interop: " index)))  ;; <-- here
      (let [[x y] (dom/on! js/document "mousemove" (fn [e] [(.-clientX e) (.-clientY e)]))]
        ;; Adapted from https://recharts.org/en-US/examples/TinyLineChart
        (with-reagent TinyLineChart [{:name "Page A", :uv 4000, :pv 2400, :amt 2400}
                                     {:name "Page B", :uv 3000, :pv 1398, :amt 2210}
                                     {:name "Page C", :uv 2000, :pv (* 2 y), :amt 2290}  ; inject value
                                     {:name "Page D", :uv 2780, :pv 3908, :amt 2000}
                                     {:name "Page E", :uv 1890, :pv 4800, :amt 2181}
                                     {:name "Page F", :uv 2390, :pv 3800, :amt 2500}
                                     {:name "Page G", :uv 3490, :pv 4300, :amt 2100}])
        (with-reagent MousePosition x y)))))

The resultant screenshot is here.

The above code is simplified and contrived in some way but what I want here is to enumerate reagent-interopped components three times.

However, the first and second reagent-interoped components are not shown and the last indexed components are only shown.

The whole code to run locally is here.

https://github.com/philoskim/electric/blob/master/src-docs/user/demo_reagent_interop.cljc

Don't forget to execute npm install before running the example.

[dustingetz]

Problem is: reagent interop inside of efor — (e/for [index (range 3)] (with-reagent TinyLineChart ...)) — apparently only renders once

[dustingetz]

@philoskim try wrapping each with-reagent call into it's own div container. The with-reagent code writes directly into the current element in scope.

[dustingetz]

Ooh, it seems that the with-reagent macro actually includes a wrapper div, so I am wrong

[ggeoffrey]

Fixed in dbbd147a0dc6748d5bf420c697d9d2221409cbfa, full code is here