Extracted base logic for the counter <button>s into new widget <ButtonForCounter>, so that the logic for future new functionality for all instances would be DRY.

Author: maratbn

webpack_in/entry.jsx

@@ -232,6 +232,19 @@ class ListWidget extends React.Component {
       }
 }
 
+class ButtonForCounter extends React.Component {
+  render() {
+      return (<button onClick={ () => {
+                          this.props.onCount();
+                        }}>{ this.props.caption }</button>);
+    }
+}
+
+ButtonForCounter.propTypes = {
+    caption:                    PropTypes.string.isRequired,
+    onCount:                    PropTypes.func.isRequired
+  };
+
 class ColorComponentEntry extends React.Component {
     render() {
         return (
@@ -276,24 +289,26 @@ class ColorComponentEntry extends React.Component {
 
                           this.props.onChangeValue(convertValue(strValueEntered));
                         }} />
-              <button onClick={ () => {
+              <ButtonForCounter caption="&#9650;"
+                                onCount={ () => {
                                     const valueNew = this.props.value + 1;
 
                                     if (valueNew > 255) {
                                         return;
                                     }
 
                                     this.props.onChangeValue(valueNew);
-                                  }}>&#9650;</button>
-              <button onClick={ () => {
+                                  }} />
+              <ButtonForCounter caption="&#9660;"
+                                onCount={ () => {
                                     const valueNew = this.props.value - 1;
 
                                     if (valueNew < 0) {
                                         return;
                                     }
 
                                     this.props.onChangeValue(valueNew);
-                                  }}>&#9660;</button>
+                                  }} />
             </div>
           );
       }