1

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?

Kannan Ramamoorthy
  • 3,980
  • 9
  • 45
  • 63

1 Answers1

0

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.

Eugene Pakhomov
  • 9,309
  • 3
  • 27
  • 53
  • No luck still, Getting the below err, ``` react.development.js:316 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. ``` For, ``` [:> Form.Item [:> Input {:prefix (r/as-element [:span [:> Icon {:type "user"}]]) :placeholder "Username"}]] ``` – Kannan Ramamoorthy Jul 17 '22 at 19:19
  • Add `(js/console.log Icon)` somewhere at the top level. Does it log some component or `undefined`? If the former - no idea, I'd need a repo with a minimal reproducible example to check it myself. If the latter - your `:require` for `Icon` is incorrect. – Eugene Pakhomov Jul 17 '22 at 19:24
  • Was caught up with other things before coming back here. That was really helpful. I was importing `Icon` from `antd` like `[antd :refer [Icon]]`. Then I had to do a package.json install of `"@ant-design/icons"` and import required icon from there. Can you add the version of import suggestion as an answer so that I can mark it as answer to help others? Thanks a lot! – Kannan Ramamoorthy Jul 23 '22 at 13:03
  • Not sure what you mean by "the version of import suggestion", but feel free to edit my answer - your reputation should allow it. – Eugene Pakhomov Jul 23 '22 at 18:05