Fork me on GitHub
#clojurescript
<
2023-09-21
>
Alexandre EL-KHOURY13:09:02

Hi, I am importing Web3Button from @web3modal/react and when I try to render it in main function I get two warning messages in my console that says :

Warning: <Web3Button /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. Web3Button
Warning: The tag <Web3Button> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Any idea why this happen and how to fix this since my button isnt even rendered ? I cant find anythin helpful online.... More details in the reply section

p-himik13:09:31

How did you use it exactly?

Alexandre EL-KHOURY13:09:45

(defn Application []
  (js/console.log "Hello world!")
  [:<>
   [:div
    [:h1 "Wallet Connect V2"]
    [:div
     [:h2 "my web3 component"]
     [:Web3Button]]]])

(defn app []
  (let [container (js/document.getElementById  "app")
        root (rdom/createRoot container)]
    (.render root (r/as-element [Application]))))
My headers are rendered but not the button

p-himik13:09:03

Remove the : in front of Web3Button and make sure Web3Button is correctly required.

p-himik13:09:30

Also, add :> in front of it since it's a React component. Finally for future reference, #C0620C0C8 would be the right place for such questions.

Alexandre EL-KHOURY13:09:42

thanks @U2FRKM4TW but i've got another error : Uncaught Error: Assert failed: Invalid Hiccup tag: [:>WagmiConfig {:config #object[Config [object Object]]} [:>Web3Button]] (in connectwallet.core.Application) (= ">" n) Will go make a post in #C0620C0C8

p-himik13:09:52

Nah, no need.

🙂 1
p-himik13:09:05

Since you've already asked it here and we're talking. Add a space after :>.

Alexandre EL-KHOURY13:09:44

It worked, thanks a lot !

👍 1
p-himik13:09:53

And check out examples in the Reagent's repo. They have example for pretty much all scenarios, including working with native React component. 90% of all possible questions will be answered.

👍 1
❤️ 2