ricardo-react-elements | Stripe Developers | Page 1

lapis yewBOT Apr 17, 2023, 5:12 PM

#

little lance Apr 17, 2023, 5:13 PM

#

BodyComponent is a hook that renders the right Body depending on the modal step

#

When rendering the second body (step 2) that uses useStripe it throws the error, saying it cant find Elements Context

wild bough Apr 17, 2023, 5:15 PM

#

What is the second body here? Is it within the <Elements> tag?

little lance Apr 17, 2023, 5:16 PM

#

BodyComponent changes depending on the step

#

Something like:

const useBody = ({ step }) => {
if (step === 1 ) return Body1;
if (step === 2 ) return Body2;
}

wild bough Apr 17, 2023, 5:19 PM

#

Okay so you are re-rendering the Body component and in Step 2 it does not recognize the Elements context it is loaded in?

little lance Apr 17, 2023, 5:19 PM

#

Exactly...

#

In reality, when I change the step, I'm re-rendering everything in that screenshot. I Should only re-render the BodyComponent, but yeah...

wild bough Apr 17, 2023, 5:26 PM

#

Yeah, this will likely break the required connection between the <Elements> component and the components rendered within it. I think you will need to render the complete checkout flow in a single component and perhaps use show/hide logic to achieve the effect you are going for.

lapis yewBOT Apr 17, 2023, 5:27 PM

#

little lance Apr 17, 2023, 5:30 PM

#

That Body2 that uses useStripe() is in a Shared folder. If I copy paste it to near this Modal, it actually works.

#

The problem is that other components also use this Body2 and doing this change, will introduce a lot of duplicated code

wild bough Apr 17, 2023, 5:34 PM

#

It sounds like you are recreating a new Elements component instance when you transition to <Body2>. This will mean it looses all context of what happened in <BodyComponent>

patent granite Apr 17, 2023, 5:42 PM

#

ricardo-react-elements

little lance Apr 17, 2023, 5:44 PM

#

I don't think that is the problem. If I put the <Elements> element in _app.tsx (which is the file executed by nextJS when a pages load) it gives the same error. I don't think the problem is because of useState or re-render.

patent granite Apr 17, 2023, 5:45 PM

#

Can you give us a clear end to end reproduction so that we can look at the code and what happens?

little lance Apr 17, 2023, 5:51 PM

#

I'm going to try and reproduce this in codesandbox

wild bough Apr 17, 2023, 5:52 PM

#

When reproducing, can you also try rendering the <Elements> provider component at the root of the application?

little lance Apr 17, 2023, 6:37 PM

#

I can't reproduce this error in a new application. Same logic but its working on the new app

#

Is there a way to get live support? I can't share the code/repo

patent granite Apr 17, 2023, 6:41 PM

#

this is the closest to live support you can get. We won't do a call or screensharing.

#ricardo-react-elements