Refactor

src/components/counter.jsx

@@ -52,20 +52,21 @@ class Counter extends Component {
     // let classes = this.getBadgeClasses();
     // console.log("props", this.props);
     console.log("Counter - rendered");
+    const { onDelete, onIncrement } = this.props;
     return (
       <div>
         {/* <h4> {this.props.id}</h4> */}
         {/* <img src={this.props.counter.imageUrl} alt="" /> */}
         {/* <span style={this.styles} className="badge badge-primary m-2">{this.formatCount()} </span> */}
         <span className={this.getBadgeClasses()}>{this.formatCount()} </span>
         <button
-          onClick={() => this.props.onIncrement(this.props.counter)}
+          onClick={() => onIncrement(this.props.counter)}
           className="btn badge-secondary btn-sm"
         >
           Increment
         </button>
         <button
-          onClick={() => this.props.onDelete(this.props.counter.id)}
+          onClick={() => onDelete(this.props.counter.id)}
           className="btn btn-danger btn-sm m-2"
         >
           Delete

src/components/counters.jsx

@@ -39,17 +39,16 @@ class Counters extends Component {
     console.log("Counters - rendered");
     const { onReset, onDelete, onIncrement } = this.props; // Obj Destructuring
     return (
-
       <div>
         <button onClick={onReset} className="btn btn-primary btn-sm m-2">
           Reset
         </button>
         {this.props.counters.map((counter) => (
           <Counter
             key={counter.id}
+            counter={counter}
             onDelete={onDelete}
             onIncrement={onIncrement}
-            counter={counter}
             // value={counter.value}
             // id={counter.id}
           >