Converting Antd Form.Item to reagent-hiccup

Question

I'm trying to translate a antd react form item to reagent-hiccup.

The original react component is something like this,

        <Form.Item>
          {
            <Input
              prefix={<Icon type="user"/>}
              placeholder="Username"
            />
          }
        </Form.Item>

And I tried the below variations when I tried to convert it into reagent hiccup representation.

Variation 1:

[:> Form.Item
   [:> Input
    {:prefix [:> Icon {:type "user"}] :placeholder "Username"}]]

Variation 2:

[:> Form.Item
   [:> Input
    {:prefix [:> js/antd.Icon {:type "user"}] :placeholder "Username"}]]

Variation 3:

(defn antd-username []
  [:> Form.Item
   [:> Input
    {:prefix (r/as-component [:span [:> Icon {:type "user"}]]) :placeholder "Username"}]])

None of them worked and I'm getting the below error,

Uncaught Error: Objects are not valid as a React child (found: object with keys {type}). If you meant to render a collection of children, use an array instead.
    in span
    in span
    in Unknown (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by app.auth.views.login.antd_username)
    in div
    in div
    in div (created by Col)
    in Col
    in Unknown
    in div (created by Row)
    in Row
.
.
.
.

Whereas if I remove the prefix part it works. So I don't have any other issues.

What's the right way of converting the aforementioned component to reagent-hiccup?

Answer 1

There are React components, instances, and elements. You almost got it in your third variation - you do need to wrap Hiccup vectors with something for React components to understand them. <Icon .../> creates a React element, so so seems like prefix=... expects an element. All you gotta do is replace r/as-component in your third variation with r/as-element.