Upvote

Why needed react

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<body>
  <div class="wrapper">
    <button class="upvote-btn">
      <span class="upvote-text">Upvote</span>
      <span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </button>
    <button class="downvote-btn">
      <span class="downvote-text">Downvote</span>
      <span><i class="fa fa-thumbs-down" aria-hidden="true"></i></span>
    </button>
  </div>
</body>

JavaScript

const buttonUp = document.getElementsByClassName(".upvote-btn");
console.log(buttonUp);
const buttonUpText = buttonUp.querySelector(".upvote-text");
let isUpvoted = false;
buttonUp.addEventListener('click', () => {
  isUpvoted = !isUpvoted;
  if (!isDownvoted && isUpvoted) {
    buttonUpText.innerHTML = "Cancel"
  } else {
    buttonUpText.innerHTML = "Upvote"
  }
})

const buttonDown = document.querySelector(".downvote-btn");
const buttonDownText = buttonDown.querySelector(".downvote-text");
let isDownvoted = false;
buttonDown.addEventListener('click', () => {
  isDownvoted = !isDownvoted;
  if ( !isUpvoted && isDownvoted) {
    buttonDownText.innerHTML = "Cancel"
  } else {
    buttonDownText.innerHTML = "Downvote"
  }
})