From c36d4c48e9c13651f1bbeeef4928623df2f74202 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Wed, 9 Dec 2015 01:06:50 +0200
Subject: Pretty rendering of IP and CIDR, no validation yet

---
 index.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/index.js b/index.js
index 84c4e04..6757bc8 100644
--- a/index.js
+++ b/index.js
@@ -15,20 +15,30 @@ class IPAddress extends React.Component {
 
   handleChange = (event) => {
     var octets = this.state.octets
-    octets[+event.target.attributes['data-octet'].value] = +event.target.value
-    this.setState({
-      octets: octets
-    })
+    var val = +event.target.value
+    var octet = event.target.attributes['data-octet'].value
+    if (octet == 'cidr') {
+      this.setState({
+        cidr: val
+      })
+    }
+    else {
+      octets[+octet] = val
+      this.setState({
+        octets: octets
+      })
+    }
   }
 
   render() {
+    var pretty = this.state.octets.join('.') + '/' + this.state.cidr
     return <form>
       <input type="text" data-octet="0" onChange={this.handleChange} value={this.state.octets[0]}/>.
       <input type="text" data-octet="1" onChange={this.handleChange} value={this.state.octets[1]}/>.
       <input type="text" data-octet="2" onChange={this.handleChange} value={this.state.octets[2]}/>.
       <input type="text" data-octet="3" onChange={this.handleChange} value={this.state.octets[3]}/>/
-      <input type="text" onChange={this.handleChange} value={this.state.cidr}/>
-      <h2></h2>
+      <input type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
+      <h2>Result: {pretty}</h2>
     </form>
   }
 }
-- 
cgit v1.3.1