Merge pull request #214 from storybooks/chore/readme

chore(readme): update readme and example

README.md

@@ -16,9 +16,7 @@ An online example from the `/example` directory can be found here: [Here](http:/
 
 ### Quick Start
 ```javascript
-'use strict';
-
-import React from 'react';
+import React, {PureComponent} from 'react';
 import ReactDOM from 'react-dom';
 import {Treebeard} from 'react-treebeard';
 
@@ -53,19 +51,26 @@ const data = {
     ]
 };
 
-class TreeExample extends React.Component {
+class TreeExample extends PureComponent {
     constructor(props){
         super(props);
-        this.state = {};
-        this.onToggle = this.onToggle.bind(this);
+        this.state = {data};
     }
+
     onToggle(node, toggled){
-        if(this.state.cursor){this.state.cursor.active = false;}
+        const {cursor, data} = this.state;
+        if (cursor) {
+            this.setState(() => ({cursor, active: false}));
+        }
         node.active = true;
-        if(node.children){ node.toggled = toggled; }
-        this.setState({ cursor: node });
+        if (node.children) { 
+            node.toggled = toggled; 
+        }
+        this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
     }
+
     render(){
+        const {data} = this.state;
         return (
             <Treebeard
                 data={data}

example/app.js

@@ -1,7 +1,7 @@
-import React, {PureComponent} from 'react';
+import React, {Fragment, PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import {Treebeard, decorators} from '../src/index';
+import {Treebeard, decorators} from '../src';
 import styled from '@emotion/styled';
 
 import data from './data';
@@ -63,35 +63,34 @@ class DemoTree extends PureComponent {
     }
 
     onToggle(node, toggled) {
-        const {cursor} = this.state;
+        const {cursor, data} = this.state;
 
         if (cursor) {
-            cursor.active = false;
+            this.setState(() => ({cursor, active: false}));
         }
 
         node.active = true;
         if (node.children) {
             node.toggled = toggled;
         }
 
-        this.setState({cursor: node});
+        this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
     }
 
-    onFilterMouseUp(e) {
-        const filter = e.target.value.trim();
+    onFilterMouseUp({target: {value}}) {
+        const filter = value.trim();
         if (!filter) {
-            return this.setState({data});
+            return this.setState(() => ({data}));
         }
         let filtered = filters.filterTree(data, filter);
         filtered = filters.expandFilteredNodes(filtered, filter);
-        this.setState({data: filtered});
+        this.setState(() => ({data: filtered}));
     }
 
     render() {
-        const {data: stateData, cursor} = this.state;
-
+        const {data, cursor} = this.state;
         return (
-            <Div>
+            <Fragment>
                 <Div style={styles.searchBox}>
                     <Div className="input-group">
                         <span className="input-group-addon">
@@ -107,15 +106,15 @@ class DemoTree extends PureComponent {
                 </Div>
                 <Div style={styles.component}>
                     <Treebeard
-                        data={stateData}
+                        data={data}
                         decorators={decorators}
                         onToggle={this.onToggle}
                     />
                 </Div>
                 <Div style={styles.component}>
                     <NodeViewer node={cursor}/>
                 </Div>
-            </Div>
+            </Fragment>
         );
     }
 }