Class: Counter

Counter(props)

Creates a row of buttons for a counter.

Also define some life cycle hooks.

Constructor

new Counter(props)

Class components always need to call the base constructor with props. Moreover, ES6 classes need to call super in case they are subclasses. Thus, if you wish to use it in the constructor, you need to pass it to super(). In case we omit it, we can always find props available inside render function.
Parameters:
Name Type Description
props Object component input.
Properties
Name Type Description
key Number counter id.
onDelete function callback to delete a counter.
onIncrement function callback to increment a counter.
onDecrement function callback to decrement a counter.
counter Object.<id:Number, value:Number> counter object.
Source:
See:

Extends

  • React.Component

Methods

componentDidUpdate(prevProps, prevState)

Called when a component is updated.

Remember that setState is asynchronous.
Furthermore, there is no state in this class.
As a consequence, prevState is always null.
Parameters:
Name Type Description
prevProps Object previous props object.
prevState Object previous state object.
Source:
See:

componentWillUnmount()

Called when the component is destroyed.
Source:

formatCount() → {String|Number}

Format the value of this counter as 'Zero' or its numerical value.
Source:
Returns:
the value of this counter.
Type
String | Number

getBadgeClasses() → {String}

Returns the color for this counter badge: yellow for 'Zero', or blue otherwise.
Source:
Returns:
the class for setting the color of this counter badge.
Type
String

render() → {HTMLDivElement}

Use bootstrap's grid system to build layouts: one row and two columns.
Source:
See:
Returns:
a badge, plus an increment, a decrement, and a delete button.
Type
HTMLDivElement