Make payment reusable and add another payment input

andrewabogado · Mar 31, 2015 · 58098e7 · 58098e7
1 parent ac715e4
commit 58098e7
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/react-link-binding.html b/react-link-binding.html
@@ -20,20 +20,33 @@
 
       getInitialState: function() {
         return {
-          payment: 0
+          payment: 0,
+          payment2: 0
         };
       },
 
       render: function() {
+        var total = parseInt(this.state.payment, 10) + parseInt(this.state.payment2, 10);
         return (
           <div>
-            <input type="text" valueLink={this.linkState('payment')} />
-            {this.state.payment}
+            <Payment valueLink={this.linkState('payment')} />
+            <Payment valueLink={this.linkState('payment2')} />
+            {total}
           </div>
         );
       }
     });
 
+    var Payment = React.createClass({
+
+      render: function() {
+        return this.transferPropsTo (
+          <input type="text" />
+        );
+      }
+
+    });
+
     React.renderComponent(
       <App />,
       document.getElementById('app')