Something went wrong on our end
-
Mehmet Salih Hasanoglu authoredMehmet Salih Hasanoglu authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
counter.jsx 1.31 KiB
import React, { Component } from "react";
class Counter extends Component {
getBadgeClasses() {
let classes = "badge m-2 bg-";
classes += this.props.counter.value === 0 ? "warning text-dark" : "primary";
return classes;
}
formatCount() {
const { value } = this.props.counter;
return value === 0 ? "Zero" : value;
}
componentDidUpdate(prevProps, prevState) {
console.log("prevProps", prevProps);
console.log("prevState", prevState);
if (prevProps.counter.value !== this.props.counter.value) {
// Ajax call and get new data from the server
}
}
componentWillUnmount() {
console.log("Counter - Unmount");
}
render() {
console.log("Counter - Rendered");
return (
<div>
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button
onClick={() => this.props.onIncrement(this.props.counter)}
className="btn btn-secondary btn-sm"
>
Increment
</button>
<button
onClick={() => this.props.onDelete(this.props.counter.id)}
className="btn btn-danger btn-sm m-2"
>
Delete
</button>
</div>
);
}
}
// constructor() {
// super();
// this.handleIncrement = this.handleIncrement.bind(this);
// }
export default Counter;