Add description field and save button

src/App.js

@@ -5,10 +5,10 @@ import Counters from "./components/counters";
 class App extends Component {
   state = {
     counters: [
-      { id: 1, value: 0 },
-      { id: 2, value: 0 },
-      { id: 3, value: 0 },
-      { id: 4, value: 0 }
+      { id: 1, value: 0, description: '' },
+      { id: 2, value: 0, description: '' },
+      { id: 3, value: 0, description: '' },
+      { id: 4, value: 0, description: '' }
     ]
   };
 
@@ -45,6 +45,15 @@ class App extends Component {
     window.location.reload();
   };
 
+  handleDescriptionChange = (counter, desc) => {
+    const counters = [...this.state.counters];
+    const index = counters.indexOf(counter);
+    counters[index] = { ...counters[index] };
+    counters[index].description = desc;
+    this.setState({ counters });
+  };
+
+
   render() {
     return (
       <div>
@@ -59,6 +68,7 @@ class App extends Component {
             onDecrement={this.handleDecrement}
             onDelete={this.handleDelete}
             onRestart={this.handleRestart}
+            onDescriptionChange={this.handleDescriptionChange}
           />
         </main>
       </div>

src/components/counter.jsx

@@ -1,6 +1,25 @@
 import React, { Component } from "react";
 
 class Counter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {disabled: true, description: props.description};
+
+    this.handleDescriptionChange = this.handleDescriptionChange.bind(this)
+  }
+
+  // Handle Description change
+  handleDescriptionChange(event) {
+    let prevDescription = this.props.description,
+      currentDescription = event.target.value;
+
+    if( prevDescription !== currentDescription ){
+      this.setState({...this.state, disabled: false});
+    }
+
+    this.props.handleDescriptionChange(this.props.counter, currentDescription)
+  }
+
   render() {
     return (
       <div>
@@ -10,7 +29,7 @@ class Counter extends Component {
               {this.formatCount()}
             </span>
           </div>
-          <div className="col-md-4">
+          <div className="col-md-6">
             <button
               className="btn btn-secondary"
               onClick={() => this.props.onIncrement(this.props.counter)}
@@ -30,6 +49,21 @@ class Counter extends Component {
             >
               <i className="fa fa-trash-o" aria-hidden="true" />
             </button>
+            <input type="text" className="form-control d-inline w-50 m-2 description"
+                   placeholder="Description"
+                   value={this.state.description}
+                   onChange={(evt) => this.handleDescriptionChange(evt)}
+            >
+            </input>
+            <button
+              className={`btn d-inline 
+                ${ !this.state.disabled ? "btn-primary" : "" } 
+                ${ this.state.disabled ? "btn-light" : "" }`
+              }
+            >
+              Save
+            </button>
+
           </div>
         </div>
       </div>
@@ -46,6 +80,7 @@ class Counter extends Component {
     const { value } = this.props.counter;
     return value === 0 ? "Zero" : value;
   };
+
 }
 
 export default Counter;

src/components/counters.jsx

@@ -9,7 +9,8 @@ class Counters extends Component {
       onDelete,
       onDecrement,
       counters,
-      onRestart
+      onRestart,
+      onDescriptionChange
     } = this.props;
     return (
       <div>
@@ -34,6 +35,7 @@ class Counters extends Component {
             onIncrement={onIncrement}
             onDecrement={onDecrement}
             onDelete={onDelete}
+            handleDescriptionChange={onDescriptionChange}
           />
         ))}
       </div>

src/index.css

@@ -12,3 +12,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+/* Counter */
+.description{
+  width: 40%;
+  background: #F1F2F3!important;
+  border-radius: 6px;
+
+  font-size: 16px;
+  line-height: 19px;
+  color: #787F85;
+}