Pass down gun instance so things don't break

examples/react/src/App.js

@@ -4,20 +4,25 @@ import Chat from './Chat'
 import Json from './Json'
 
 class App extends Component {
+  constructor() {
+    super();
+    this.gun = Gun(location.origin + '/gun')
+  }
+  
   render() {
     return (
       <div>
         <h1>React Examples</h1>
         <h2>Todo</h2>
-        <Todos />
+        <Todos gun={this.gun} />
         <br />
         <hr />
         <h2>Chat</h2>
-        <Chat />
+        <Chat gun={this.gun} />
         <br />
         <hr />
         <h2>Json</h2>
-        <Json />
+        <Json gun={this.gun} />
       </div>
     );
   }

examples/react/src/Chat.js

@@ -1,7 +1,6 @@
 import React, { Component }  from 'react'
 import Gun from 'gun'
 
-const gun = Gun(location.origin + '/gun').get('chat')
 const formatMsgs = msgs => Object.keys(msgs)
   .map(key => ({ key, ...msgs[key] }))
   .filter(m => Boolean(m.when) && m.key !== '_')
@@ -9,8 +8,9 @@ const formatMsgs = msgs => Object.keys(msgs)
   .map(m => ((m.whenFmt = new Date(m.when).toLocaleString().toLowerCase()), m))
 
 export default class Chat extends Component {
-  constructor() {
+  constructor({gun}) {
     super()
+    this.gun = gun.get('chat');
     this.state = {
       newMsg: '',
       name: (document.cookie.match(/alias\=(.*?)(\&|$|\;)/i)||[])[1]||'',
@@ -19,7 +19,7 @@ export default class Chat extends Component {
   }
   componentWillMount() {
     const tmpState = {}
-    gun.map().val((msg, key) => {
+    this.gun.map().val((msg, key) => {
       tmpState[key] = msg
       this.setState({msgs: Object.assign({}, this.state.msgs, tmpState)})
     })
@@ -32,7 +32,7 @@ export default class Chat extends Component {
     document.cookie = ('alias=' + who) 
     const when = Gun.time.is()
     const key = `${when}_${Gun.text.random(4)}`
-    gun.path(key).put({
+    this.gun.path(key).put({
       who,
       when,
       what: this.state.newMsg,

examples/react/src/Json.js

@@ -1,30 +1,29 @@
 import React, { Component }  from 'react'
-import Gun from 'gun'
 
-const gun = Gun(location.origin + '/gun').get('json')
 const formatJson = json =>
   Object.keys(json)
     .map(key => ({ key, val: json[key]}))
     .filter(el => el.key !== '_')
 
 export default class Json extends Component {
-  constructor() {
+  constructor({gun}) {
     super()
+    this.gun = gun.get('json');
     this.state = { newField: '', json: [] }
   }
 
   componentWillMount() {
-    gun.on(json => this.setState({ json: formatJson(json) }))
+    this.gun.on(json => this.setState({ json: formatJson(json) }))
   }
 
   edit = key => e => {
     e.preventDefault()
-    gun.path(key).put(e.target.value)
+    this.gun.path(key).put(e.target.value)
   }
   
   add = e => {
     e.preventDefault()
-    gun.path(this.state.newField).put('value')
+    this.gun.path(this.state.newField).put('value')
     this.setState({newField: ''})
   }
 

examples/react/src/Todos.js

@@ -2,27 +2,27 @@ import './style.css'
 import React, { Component }  from 'react'
 import Gun from 'gun'
 
-const gun = Gun(location.origin + '/gun').get('todos')
 const formatTodos = todos => Object.keys(todos)
   .map(key => ({ key, val: todos[key] }))
   .filter(t => Boolean(t.val) && t.key !== '_')
 
 export default class Todos extends Component {
-  constructor() {
+  constructor({gun}) {
     super()
+    this.gun = gun.get('todos');
     this.state = {newTodo: '', todos: []}
   }
   componentWillMount() {
-    gun.on(todos => this.setState({
+    this.gun.on(todos => this.setState({
       todos: formatTodos(todos)
     }))
   }
   add = e => {
     e.preventDefault()
-    gun.path(Gun.text.random()).put(this.state.newTodo)
+    this.gun.path(Gun.text.random()).put(this.state.newTodo)
     this.setState({newTodo: ''})
   }
-  del = key => gun.path(key).put(null)
+  del = key => this.gun.path(key).put(null)
   handleChange = e => this.setState({ newTodo: e.target.value})
   render() {
     return <div>