import React, { Component } from 'react';
import { OverlayCartContainer,OverlayCartHeader,TotalContainer,
ActionSection,ViewBagButton,CheckoutButton,OverlayContainerWrapper,} from './OverlayCartStyle';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';
import { OverlayCartbody } from '../../';
export class OverlayCartWrapperContainer extends Component {
constructor(){
super();
this.state={
ref: React.createRef(null),
actionRef: React.createRef(null),
}
}
render() {
return (
<OverlayContainerWrapper > <OverlayCartContainer ref={this.state.ref}>
<OverlayCartHeader>
My Bag, <span>{getTotalItem()} items</span>
</OverlayCartHeader>
<OverlayCartbody cartItem ={this.props.cart}/>
<TotalContainer>
<p>Total</p>
<h6>{this.props.currencySymbol} {getTotalPrice(this.props.currencyState)}</h6>
</TotalContainer>
<ActionSection >
<Link to={"/cart"}><ViewBagButton onClick={(e)=>{this.props.toggleCart(e)}}>VIEW BAG</ViewBagButton></Link>
<CheckoutButton>CHECKOUT</CheckoutButton>
</ActionSection>
</OverlayCartContainer></OverlayContainerWrapper>
)
}
}
const mapStateToProps = (state) =>{
return {
currencyState:state.currency.currencyState,
currencySymbol:state.currency.currencySymbol,
cart:state.cart.cart.cartItems
}
}
export default connect(mapStateToProps)(OverlayCartWrapperContainer);
Here in the <ActionSection ><Link to={"/cart"}><ViewBagButton onClick={(e)=>{this.props.toggleCart(e)}}>VIEW BAG</ViewBagButton></Link<CheckoutButton>CHECKOUT</CheckoutButton></ActionSection>
I want when i click on view bag it redirect to cart view page it should go to cart page but the onclick function is rendering . i also want that onclick function run but page also redirect please help me how to do it this onClick={(e)=>{this.props.toggleCart(e)}} onclick should run but it also go to the next page
Is your App/Component wrapped in react-router? if not don't use Link.
Simple solution i can think of is replace your Link with div and then your onClick function will work and in the end of onClick function code, you can use history.push('/cart')
<div>
<ViewBagButton onClick={this.props.toggleCart}>
VIEW BAG
</ViewBagButton>
</div>
const toggleCart = (e) => {
// your code...
// at the end
history.push('/cart');
// you can get the history from props or can use useHistory hook
}