less ridiculous example for button type in cra

examples/cra-kitchen-sink/src/stories/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import EventEmiter from 'eventemitter3';
 
 import { storiesOf } from '@storybook/react';
@@ -60,6 +61,23 @@ const InfoButton = () => (
   </span>
 );
 
+class AsyncItemLoader extends React.Component {
+  constructor() {
+    super();
+    this.state = { items: [] };
+  }
+
+  loadItems() {
+    setTimeout(() => this.setState({ items: ['pencil', 'pen', 'eraser'] }), 1500);
+  }
+
+  render() {
+    button('Load the items', () => this.loadItems());
+    return this.props.children(this.state.items);
+  }
+}
+AsyncItemLoader.propTypes = { children: PropTypes.func.isRequired };
+
 storiesOf('Button', module)
   .addDecorator(withKnobs)
   .add('with text', () => (
@@ -111,8 +129,6 @@ storiesOf('Button', module)
     const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
     const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
 
-    button('Arbitrary action', action('You clicked it!'));
-
     return (
       <div style={style}>
         <p>{intro}</p>
@@ -121,6 +137,14 @@ storiesOf('Button', module)
         <p>In my backpack, I have:</p>
         <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
         <p>{salutation}</p>
+        <hr />
+        <p>PS. My shirt pocket contains: </p>
+        <AsyncItemLoader>
+          {loadedItems => {
+            if (!loadedItems.length) return <li>No items!</li>;
+            return <ul>{loadedItems.map(i => <li key={i}>{i}</li>)}</ul>;
+          }}
+        </AsyncItemLoader>
       </div>
     );
   })