Clojurians Log v2

I'm not sure if I've mentioned it before, but please put long code blocks either in attachments or in a thread. Definitely the latter or a combination of both if there's more than one long code block.

Sorry, I will do

continued: payment-goto-stripe (sorry for poor naming) is the place where the webhook occurs, I think because of the CardElement

(defn payment-goto-stripe []
(let [stripePublicPromise (loadStripe "redacted"),
card-element-options (:style #js {
:base #js {
:color "#32352d",
:fontFamily ["Helvetica Neue", "Helvetica", "sans-serif"],
:fontSmoothing "antialiased",
:fontSize ["16px", "::placeholder" #js { :color "#aab7c4" } ]} :invalid #js { :color "#aab7c4", :iconColor "fa755a" } })]
[(r/adapt-react-class Elements) {:stripe stripePublicPromise}
[:label "Card details"
[(r/adapt-react-class CardElement) {:options card-element-options}
]]]))

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See  for tips about how to debug and fix this problem.
React 2
throwInvalidHookError
useContext
useElementsContextWithUseCase react-stripe.umd.js:485
useElements react-stripe.umd.js:497
handle_pay_submit main.cljs:44
invoice$frontend$main$handle_pay_submit invoice.frontend.main.js:24
invoice$frontend$main$invoice_container_tree main.cljs:106
res component.cljs:89
reagent$impl$component$wrap_render reagent.impl.component.js:126
reagent$impl$component$do_render component.cljs:117
_render component.cljs:260
reagent$ratom$in_context ratom.cljs:44
reagent$ratom$deref_capture ratom.cljs:57
reagent$ratom$run_in_reaction ratom.cljs:539
reagent$impl$component$wrap_funs_$_render component.cljs:260
React 16
reagent$dom$render_comp dom.cljs:17
cljs$core$IFn$_invoke$arity$3 dom.cljs:51
cljs$core$IFn$_invoke$arity$2 dom.cljs:37
invoice$frontend$main$mountit main.cljs:125
invoice$frontend$main$init main.cljs:129
<anonymous> shadow.module.invoice-frontend.append.js:4
globalEval invoice-frontend.js:430
evalLoad invoice-frontend.js:1387
<anonymous> invoice-frontend.js:1554
react-dom.development.js:16228:12

Have you tried searching for "Hooks can only be called inside of the body of a function component." in this channel or on the web? And have you read the docs on how to use hooks from Reagent components?

I haven't read much in the slack channel but have searched a small amount on google. I'm trying to find where the reagant docs specify hooks, I found https://cljdoc.org/d/reagent/reagent/1.2.0/doc/tutorials/react-features?q=hook#hooks but it doesn't make much sense to me. I guess what I don't understand is why a hook is being called. From my understanding, all handle-pay-submit is doing with (.getElement (elements CardElement) is getting the value of a js element (I guess maybe because it's getting the value of a component it could be considered a hook?)

> I don't understand is why a hook is being called Uhm, because you explicitly call it, right in the first line of the body of payment-goto-stripe? I have no idea what (.getElement (elements CardElement)) does since I have no idea what CardElement is and what elements is.

Hooks can only be used in function components, and you can use those with Reagent by using :f>, among other things.

This worked. Thank you. I apologize for some of the less than desireable aspects of my code. For context, I'm just a bit burned out - not intending to be rude. I appreciate your continued feedback

Ah, no worries - I have never perceived your messages as rude.