Like Button

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

CSS

.like-button {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background: #ddd;
  border: 0;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  display: block;
  margin-bottom: 40px;
  border-bottom: 2px #bbb solid;
  transition: background .1s;
  transition: border-bottom-color .1s;
}
.like-button.liked {
  background: #4267b2;
  border-bottom-color: #375695;
  color: #fff;
}

Babel + JSX

class LikeButton extends React.Component {

  constructor() {
   super();
   this.state = {
     count: 100,
     isLiked: false
   };
   this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    if (this.state.isLiked) {
      this.setState({
        count: this.state.count - 1,
        isLiked: false
      })
    } else {
      this.setState({
        count: this.state.count + 1,
        isLiked: true
      })
    }
  }

  render() {
    return (
      <button className={this.state.isLiked ? 'like-button liked' : 'like-button'} onClick={this.handleClick}> Like | {this.state.count}</button>
    );
  }

}

ReactDOM.render(
  <LikeButton/>,
  document.getElementById('root')
);