I'm struggling to convert the lines of code below into ES5 to make use of useState, useNavigate and other hooks as well. Also is there any proper technology out there that helps developers in converting ES5 to ES6 or vice versa?
Any help/advice would be greatly appreciated! TIA
class Vote extends Component {
state = {
like: 0,
dislike: 0,
neutral: 0,
likeActive: false,
dislikeActive: false,
neutralActive: false,
};
setDislike() {
this.setState({
dislikeActive: !this.state.dislikeActive,
dislike: this.state.dislikeActive
? this.state.dislike - 1
: this.state.dislike + 1
});
}
setLike() {
this.setState({
likeActive: !this.state.likeActive,
like: this.state.likeActive
? this.state.like - 1
: this.state.like + 1
});
}
setNeutral() {
this.setState({
neutralActive: !this.state.neutralActive,
neutral: this.state.neutralActive
? this.state.neutral - 1
: this.state.neutral + 1
});
}
handleLike() {
if (this.state.dislikeActive) {
this.setLike();
this.setDislike();
} if (this.state.neutralActive) {
this.setLike();
this.setNeutral();
}
this.setLike();
}
handleDislike() {
if (this.state.likeActive) {
this.setDislike();
this.setLike();
} if (this.state.neutralActive) {
this.setDislike();
this.setNeutral();
}
this.setDislike();
}
handleNeutral() {
if (this.state.dislikeActive) {
this.setNeutral();
this.setDislike();
} if (this.state.likeActive) {
this.setNeutral();
this.setLike();
}
this.setNeutral();
}
render() {
return (
<>
<button onClick={() => this.handleLike()}>Plus: {this.state.like}</button>
<button onClick={() => this.handleNeutral()}>Neutral:{this.state.neutral}</button>
<button onClick={() => this.handleDislike()}>Minus: {this.state.dislike}</button>
</>
);
}
}
ReactDOM.render(<Vote />, document.getElementById('root'));