diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index 4972e2131b..e4706e0850 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -16,13 +16,11 @@ Specifies a delay for loading state. If `spinning` ends during delay, loading st
 ````jsx
 import { Spin, Alert, Switch } from 'antd';
 
-const Card = React.createClass({
-  getInitialState() {
-    return { loading: false };
-  },
-  toggle(value) {
+class Card extends React.Component {
+  state = { loading: false }
+  toggle = (value) => {
     this.setState({ loading: value });
-  },
+  }
   render() {
     const container = (
       <Alert
@@ -37,12 +35,10 @@ const Card = React.createClass({
         Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
       </div>
     );
-  },
-});
+  }
+}
 
-ReactDOM.render(
-  <Card />
-, mountNode);
+ReactDOM.render(<Card />, mountNode);
 ````
 
 ````css
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index bbdfd14a23..4c361905c9 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -16,13 +16,11 @@ Embedding content into `Spin` will alter it into loading state.
 ````jsx
 import { Spin, Switch, Alert } from 'antd';
 
-const Card = React.createClass({
-  getInitialState() {
-    return { loading: false };
-  },
-  toggle(value) {
+class Card extends React.Component {
+  state = { loading: false }
+  toggle = (value) => {
     this.setState({ loading: value });
-  },
+  }
   render() {
     const container = (
       <Alert
@@ -37,8 +35,8 @@ const Card = React.createClass({
         Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Card />, mountNode);
 ````