Toggle icon locally with on / off buttons

.babelrc

@@ -1,4 +1,4 @@
 {
     "presets": ["react"],
-    "plugins": ["react-hot-loader/babel"]
+    "plugins": ["transform-object-rest-spread", "react-hot-loader/babel"]
 }

package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-react": "^6.24.1",
     "react-hot-loader": "^3.0.0-beta.6",
     "webpack": "^3.0.0",

src/app.js

@@ -1,6 +1,25 @@
 import React from 'react';
 
-export default class Site extends React.Component {
+export default class App extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            ioState: {
+                dout: [false],
+            },
+        }
+    }
+
+    doutSet(pin, value) {
+        this.setState({
+            ioState: {
+                ...this.state.ioState,
+                dout: this.state.ioState.dout.map((x, i) => i == pin ? value : x),
+            },
+        });
+    }
+
     render() {
         return (
             <div className="ui text container">
@@ -16,18 +35,19 @@ export default class Site extends React.Component {
                     <div className="column">
                         <div className="ui segment">
                             <div className="ui top attached label">Digital Out</div>
-                            <div className="ui two column grid">
+                            <div className="ui two column middle aligned grid">
                                 <div className="twelve wide column">
                                     <div className="ui right pointing label">
                                           DO1
                                     </div>
                                     <div className="ui buttons">
-                                      <button className="ui red button">On</button>
-                                      <button className="ui button">Off</button>
+                                      <button onClick={() => this.doutSet(0, true)} className="ui red button">On</button>
+                                      <button onClick={() => this.doutSet(0, false)} className="ui button">Off</button>
                                     </div>
                                 </div>
                                 <div className="four wide right aligned column">
-                                    <i className="red idea big icon"></i>
+                                    {!this.state.ioState.dout[0] && <i className="bordered inverted disabled idea big icon"></i>}
+                                    {this.state.ioState.dout[0] && <i className="bordered inverted red idea big icon"></i>}
                                 </div>
                             </div>
                         </div>