fulanovic

React - counter

Sep 29th, 2020
851
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2.  
  3. class Counter extends Component {
  4.     render() {
  5.         const { counter } = this.props;
  6.         return (
  7.             <div className='counter'>
  8.                 <button
  9.                     className='btn btn-primary'
  10.                     onClick={() => this.props.onIncrement(counter)}
  11.                 >
  12.                     Increment
  13.                 </button>
  14.                 <button
  15.                     className='btn btn-secondary'
  16.                     onClick={() => this.props.onDecrement(counter)}
  17.                 >
  18.                     Decrement
  19.                 </button>
  20.                 <span className={this.getValueClass()}>
  21.                     {this.formatCount()}
  22.                 </span>
  23.             </div>
  24.         );
  25.     }
  26.  
  27.     formatCount = () => {
  28.         const { value } = this.props.counter;
  29.         return value === 0 ? 'zero' : value;
  30.     };
  31.  
  32.     getValueClass = () => {
  33.         const { value } = this.props.counter;
  34.         let cssClass = 'badge badge-';
  35.         cssClass += value === 0 ? 'warning' : 'dark';
  36.         return cssClass;
  37.     };
  38. }
  39.  
  40. export default Counter;
  41.  
RAW Paste Data