import React from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
inCart: this.props.inCart
};
this.countInTheCart = this.countInTheCart.bind(this);
}
countInTheCart() {
let sum = 0;
this.state.inCart.forEach(element => {
sum += element.count
});
console.log(sum)
return sum;
}
render() {
return(
<div className="header">
<div className="header__title">
<NavLink to="/" activeClassName="is-active" exact={true}>Some Title</NavLink>
</div>
<div className="header__cart">
<NavLink to="/cart" activeClassName="is-active" exact={true}>
<ion-icon name="cart-outline"></ion-icon> {this.countInTheCart()} Cart
</NavLink>
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
inCart: state
}
}
export default connect(mapStateToProps)(Header);