From 36566d0e1dc9035e3dfd2c97996b1afc23fe5af1 Mon Sep 17 00:00:00 2001
From: Maximiliano Forlenza <forlenzamaximiliano@gmail.com>
Date: Sat, 11 May 2019 09:09:07 -0300
Subject: [PATCH] chore(readme): update readme and example

---
 README.md      | 23 ++++++++++++++---------
 example/app.js | 27 +++++++++++++--------------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 7382c7f..e539ac4 100644
--- a/README.md
+++ b/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}
diff --git a/example/app.js b/example/app.js
index 7bc2cb0..81efdbc 100644
--- a/example/app.js
+++ b/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,10 +63,10 @@ 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;
@@ -74,24 +74,23 @@ class DemoTree extends PureComponent {
             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,7 +106,7 @@ class DemoTree extends PureComponent {
                 </Div>
                 <Div style={styles.component}>
                     <Treebeard
-                        data={stateData}
+                        data={data}
                         decorators={decorators}
                         onToggle={this.onToggle}
                     />
@@ -115,7 +114,7 @@ class DemoTree extends PureComponent {
                 <Div style={styles.component}>
                     <NodeViewer node={cursor}/>
                 </Div>
-            </Div>
+            </Fragment>
         );
     }
 }