0

I want users to be able to click Buy button and that will redirect to a checkout component (go to a new page and show the checkout component). How do I show the Checkout component when users click Buy button ?

Checkout Component also requires a prop (price of item). How do I do this: after clicking the button?

Button code:

                       <Button
                        className={classes.root} 
                        variant="contained"  
                        color="primary"
                        disabled={loading}
                        >
                          Buy Coupon
                        </Button>

My Checkout Component takes in Price/Amount:

const CheckoutForm = ({ price }) ....

Is this on the right track? :

<Route exact path="/checkout" render={(props) => <Checkout {...props}/>}/>
BigSteppaJC
  • 91
  • 1
  • 6
  • Does it redirect to a new page? are you using a router? or just plain showing another component based on the click? – Antony Acosta Oct 20 '20 at 19:16
  • What do you mean by "redirect to a checkout component"? – evolutionxbox Oct 20 '20 at 19:16
  • I want it to go to a new page – BigSteppaJC Oct 20 '20 at 19:18
  • To navigate onClick there is an example here. https://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link On how to pass props, there is an example here https://stackoverflow.com/questions/54083066/how-to-pass-props-with-react-router-using-onclick-methods – Kunukn Oct 20 '20 at 19:31
  • The first link It uses "this.props", I am using react hooks and not sure how to use that – BigSteppaJC Oct 20 '20 at 19:42

0 Answers0