import cx from 'classnames';
import { Component } from 'react';
export default class LikeButton extends Component {
state = {
count: 100,
liked: false
}
likeMe = () => {
let newCount;
if(this.state.liked) {
newCount = this.state.count - 1;
} else {
newCount = this.state.count + 1;
}
this.setState({
count: newCount,
liked: !this.state.liked
})
}
render() {
return (
<div>
<div>
<h1
className={`like-button ${this.state.liked ? "liked" : ""}`}
onClick={this.likeMe}
>Like | <span className={`likes-counter`}>{this.state.count}</span></h1>
</div>
<style>{`
.like-button {
font-weight: normal;
cursor: pointer;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 1rem;
padding: 5px 10px;
color: #585858;
border: 1px solid #585858;
display: inline-block;
}
.liked {
font-weight: bold;
color: #1565c0;
border-color: #1565c0;
}
`}</style>
</div>
);
}
}