I have a handler like so: const addToCartHandler = (id) => { navigate(`/cart/${brand}/${id}?qty=${qty}`)};
and a button component: <Button onClick={addToCartHandler} className="btn-block w-75" disabled={item.countInStock === 0} type="button">Add to Cart </Button
When I pass an ID to the addToCartHandler(someID)
, I get erroneously navigated directly to /cart/${brand}/${id}?qty=${qty}
when I click on a link that routes to /product/:brand
When I don't pass anything and leave off the call ()
, I am accurately routed to the brand page.
Is there an explanation for this behavior?
CodePudding user response:
Hope this helps, more detail & examples available from ReactJS docs, https://reactjs.org/docs/faq-functions.html#how-do-i-pass-an-event-handler-like-onclick-to-a-component
How do I pass a parameter to an event handler or callback? You can use an arrow function to wrap around an event handler and pass parameters:
<button onClick={() => this.handleClick(id)} />