I'm working on implementing a thumbs up and thumbs down feature similar to Reddit's upvote and downvote system.
The goal is to change the color of the object to green when the thumbs up is clicked and to red when the thumbs down is clicked.
However, I need to prevent the user from clicking thumbs up twice and reverting the color from green to default white. Any suggestions?
class VoteCounter extends React.Component {
constructor(props) {
super(props);
this.state = {counter: 0}
}
increment = (e) => {
e.preventDefault();
this.setState({
counter: this.state.counter + 1
});
}
decrement = (e) => {
e.preventDefault();
this.setState({
counter: this.state.counter - 1
});
}
render() {
return (
<div className="voting">
{this.state.counter}
<button className="upvoteBtn" type="submit" onClick={this.increment}>
<i className="fa fa-thumbs-up ml-2 mr-2"/>
</button>
<button className="downvoteBtn" type="submit" onClick={this.decrement}>
<i className="fa fa-thumbs-down ml-2 mr-2"/>
</button>
</div>
)
}
}