A reagent-interop problem in Electric
philoskim opened this issue · 4 comments
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.
Problem is: reagent interop inside of efor — (e/for [index (range 3)] (with-reagent TinyLineChart ...)) — apparently only renders once
@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.
Ooh, it seems that the with-reagent macro actually includes a wrapper div, so I am wrong