Can't make CustomSVGSeries work in clojurescript

Question

I'm trying to translate this example in clojurescript (https://uber.github.io/react-vis/documentation/series-reference/custom-svg-series):

const myData = [
  {x: 1, y: 10, customComponent: 'circle', size: 10},
  {x: 1.7, y: 12, size: 20, style: {stroke: 'red', fill: 'orange'}},
  {x: 2, y: 5},
  {x: 3, y: 15},
  {x: 2.5, y: 7, customComponent: (row, positionInPixels) => {
    return (
      <g className="inner-inner-component">
        <circle cx="0" cy="0" r={10} fill="green"/>
        <text x={0} y={0}>
          <tspan x="0" y="0">{`x: ${positionInPixels.x}`}</tspan>
          <tspan x="0" y="1em">{`y: ${positionInPixels.y}`}</tspan>
        </text>
      </g>
    );
  }}
]

I started with this:

[:> rvis/CustomSVGSeries {:data [{:x 300 :y 4000 :size 30
                                  :customComponent (fn [row position-in-pixels]
                                      [:g
                                        [:text {:x 0 :y 0}
                                           [:tspan {:x 0 :y 0} "Hidrógeno"]]])}]}]

But I get this error:

The above error occurred in the <g> component:
    in g
    in g
    in AbstractSeries
    in svg
    in div
    in XYPlot
    in div
    in FlexibleXYPlot (created by lopezsolerluis.annie_web.line_chart)
    in div (created by lopezsolerluis.annie_web.line_chart)
    in lopezsolerluis.annie_web.line_chart (created by lopezsolerluis.annie_web.app_scaffold)
    in div (created by lopezsolerluis.annie_web.app_scaffold)
    in lopezsolerluis.annie_web.app_scaffold

Consider adding an error boundary to your tree to customize error handling behavior.

and

Uncaught Error: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in g
    in g
    in AbstractSeries
    in svg
    in div
    in XYPlot
    in div
    in FlexibleXYPlot (created by lopezsolerluis.annie_web.line_chart)
    in div (created by lopezsolerluis.annie_web.line_chart)
    in lopezsolerluis.annie_web.line_chart (created by lopezsolerluis.annie_web.app_scaffold)
    in div (created by lopezsolerluis.annie_web.app_scaffold)
    in lopezsolerluis.annie_web.app_scaffold

It's driving me mad...

Answer 1

Wrap [:g ...] in your :customComponent with reagent.core/as-element.

:customComponent is expected to be a function that returns a React element. JSX, when transpiled, turns its <...> into React elements. But for a Hiccup vector you have to do it manually by calling reagent.core/as-element.