[chore] fix multiple modal example.

reactjs · Sep 23, 2017 · d896241 · d896241
1 parent ce2b34e
commit d896241
Showing 1 changed file with 14 additions and 12 deletions.
diff --git a/examples/basic/multiple_modals/index.js b/examples/basic/multiple_modals/index.js
@@ -1,12 +1,17 @@
 import React, { Component } from 'react';
 import Modal from 'react-modal';
 
-function List(props) {
-  return props.items.map((x, i) => (
-    <div key={i} onClick={props.onItemClick(i)}>
-      <a href="javascript:void(0)">{x}</a>
-    </div>
-  ));
+class List extends React.Component {
+  render() {
+    return (
+      <div>
+        {this.props.items.map((x, i) => (
+          <div key={i} onClick={this.props.onItemClick(i)}>
+            <a href="javascript:void(0)">{x}</a>
+          </div>))}
+      </div>
+    );
+  }
 }
 
 class MultipleModals extends Component {
@@ -27,7 +32,6 @@ class MultipleModals extends Component {
       return;
     }
     this.setState({
-      ...this.state,
       items: [],
       listItemsIsOpen: true,
       loading: true
@@ -38,7 +42,6 @@ class MultipleModals extends Component {
     // opportunity to validate something and keep the modal open even if it
     // requested to be closed
     this.setState({
-      ...this.state,
       listItemsIsOpen: false,
       loading: false
     });
@@ -47,22 +50,21 @@ class MultipleModals extends Component {
   handleOnAfterOpenModal = () => {
     // when ready, we can access the available refs.
     (new Promise((resolve, reject) => {
-      setTimeout(() => resolve(true), 1000);
+      setTimeout(() => resolve(true), 500);
     })).then(res => {
       this.setState({
-        ...this.state,
         items: [1, 2, 3, 4, 5].map(x => `Item ${x}`),
         loading: false
       });
     });
   }
 
   onItemClick = index => event => {
-    this.setState({ ...this.state, currentItem: index });
+    this.setState({ currentItem: index });
   }
 
   cleanCurrentItem = () => {
-    this.setState({ ...this.state, currentItem: -1 });
+    this.setState({ currentItem: -1 });
   }
 
   render() {