example: Not mutate state and correctly handle selectedIndex [skip ci]

Author: danez

examples/dyno/app.js

@@ -4,7 +4,6 @@ import Modal from 'react-modal';
 import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
 
 Modal.setAppElement(document.getElementById('example'));
-Modal.injectCSS();
 
 const App = React.createClass({
   getInitialState() {
@@ -20,25 +19,57 @@ const App = React.createClass({
     };
   },
 
+  openModal() {
+    this.setState({
+      isModalOpen: true,
+    });
+  },
+
+  closeModal() {
+    this.setState({
+      isModalOpen: false,
+    });
+  },
+
+  addTab() {
+    const label = this.refs.label.value;
+    const content = this.refs.content.value;
+
+    this.setState({
+      tabs: [
+        ...this.state.tabs,
+        { label, content },
+      ],
+      selectedIndex: this.state.tabs.length,
+    });
+    this.closeModal();
+  },
+
+  removeTab(index) {
+    this.setState({
+      tabs: this.state.tabs.filter((tab, i) => i !== index),
+      selectedIndex: this.state.selectedIndex - 1,
+    });
+  },
+
   render() {
     return (
       <div style={{ padding: 50 }}>
         <p>
           <button onClick={this.openModal}>+ Add</button>
         </p>
-        <Tabs selectedIndex={this.state.selectedIndex}>
+        <Tabs
+          selectedIndex={this.state.selectedIndex}
+          onSelect={selectedIndex => this.setState({ selectedIndex })}
+        >
           <TabList>
-            {this.state.tabs.map((tab, i) => {
-              return (
-                <Tab key={i}>
-                  {tab.label} <a href="#" onClick={this.removeTab.bind(this, i)}>✕</a>
-                </Tab>
-              );
-            })}
+            {this.state.tabs.map((tab, i) => (
+              <Tab key={i}>
+                {tab.label} <a href="#" onClick={() => this.removeTab(i)}>✕</a>
+              </Tab>
+            ))}
           </TabList>
-          {this.state.tabs.map((tab, i) => {
-            return <TabPanel key={i}>{tab.content}</TabPanel>;
-          })}
+          {this.state.tabs.map((tab, i) => <TabPanel key={i}>{tab.content}</TabPanel>)}
         </Tabs>
         <Modal
           isOpen={this.state.isModalOpen}
@@ -49,44 +80,13 @@ const App = React.createClass({
           <label htmlFor="label">Label:</label><br />
           <input id="label" type="text" ref="label" /><br /><br />
           <label htmlFor="content">Content:</label><br />
-          <textarea id="content" ref="content" rows="10" cols="50"></textarea><br /><br />
+          <textarea id="content" ref="content" rows="10" cols="50" /><br /><br />
           <button onClick={this.addTab}>OK</button>{' '}
           <button onClick={this.closeModal}>Cancel</button>
         </Modal>
       </div>
     );
   },
-
-  openModal() {
-    this.setState({
-      isModalOpen: true,
-    });
-  },
-
-  closeModal() {
-    this.setState({
-      isModalOpen: false,
-    });
-  },
-
-  addTab() {
-    const label = this.refs.label.value;
-    const content = this.refs.content.value;
-
-    this.state.tabs.push({
-      label: label,
-      content: content,
-    });
-    this.setState({
-      selectedIndex: this.state.tabs.length - 1,
-    });
-    this.closeModal();
-  },
-
-  removeTab(index) {
-    this.state.tabs.splice(index, 1);
-    this.forceUpdate();
-  },
 });
 
 ReactDOM.render(<App />, document.getElementById('example'));