React query a db on component mount?
<p>For this example I am using React with <a href="http://dexie.org/" rel="nofollow">Dexie.js</a>. I have a code, zanzibar, that, when run, adds a list of objects from my IndexDB to the page. I have two current things I would like to add to this. </p>

<p>First, there appears to be an issue with finding the ID of my database. For instance, when I run <code>console.log(amigo.id)</code> under my peaches function, it returns <code>undefined</code>. I also do not see an ID on my indexDB panel. </p>

<p>Second, now that I am able to run this from a click function, I would also like to load my indexDB data via <code>componentDidMount</code>. The purpose of this would be to load everything on my indexDB to my page on page load. My <code>peaches</code> function is supposed to do this, though I am not quite sure how to follow through.   </p>

<pre><code>var SisterChristian = React.createClass({
  getInitialState:function(){
    return {
    results:[{id:'', name:'',age:''}]
    }
  },

peaches:function(){
    var datastoring = new Dexie('MySpace');
    datastoring.version(1).stores({
      friends: '++id, name, age'
    });

    datastoring.open().catch(function(err){
      alert('Oh no son:' +err);
    }); 

datastoring.friends.each((amigo)=&gt;{
console.log(amigo.id+", "+amigo.name);

}); 

},  

componentDidMount:function(){
return this.peaches();
},

  zanzibar:function(){
    // don't use document.querySelector(), you should be able to access any of your DOM elements like this
    var resname = this.inputNameEl.value;
    var resage = this.inputAgeEl.value;
    var datastoring = new Dexie('MySpace');
    datastoring.version(1).stores({
      friends: '++id, name, age'
    });

    datastoring.open().catch(function(err){
      alert('Oh no son:' +err);
    });

    var newFriend = {
      name: resname, 
      age: resage
    };

    datastoring.friends.add(newFriend).then((id) =&gt; {
      // this is how you update the state of the object with new data
        var newResults = this.state.results.concat([Object.assign({}, newFriend, { id })]);
            this.setState({results: newResults});
    });
  },

  renderResults:function(results) {
    return results.map(result =&gt; { // this is how you create DOM elements from an array of objects
      return &lt;li key={result.id}&gt;{result.name}, {result.age}&lt;/li&gt;;
    });
  },

  render:function(){
    return (
      &lt;div&gt;
        &lt;input type="text" id="inputname" ref={el =&gt; this.inputNameEl = el} /&gt;
        &lt;input type="text" id="inputage" ref={el =&gt; this.inputAgeEl = el} /&gt;
        &lt;input type="submit" value="Shipping And Handling" onClick={this.zanzibar}/&gt;
        &lt;ul&gt;{this.renderResults(this.state.results)}&lt;/ul&gt;
      &lt;/div&gt;
    );
  }

});

ReactDOM.render(&lt;SisterChristian/&gt;, document.getElementById('bacon'));
</code></pre>

<p>Included in JSFiddle
<a href="https://jsfiddle.net/jgwhxuam/" rel="nofollow">https://jsfiddle.net/jgwhxuam/</a></p>