title: React is rendering [object object] rather than the JSX
body: <p>I'm trying to render out journal entries on my site with an object (not array) and I am running into an issue, here is my current code </p>
  
  <pre><code>  populateJournal(){
  const j = Object.values(this.state.journal);
  var journalEntries = '';
  
    for (var i = 0; i &lt; j.length; i++){
      journalEntries+=
        &lt;div&gt;
        &lt;h3&gt;{j[i].title} - {j[i].date}&lt;/h3&gt;
        &lt;p&gt;{j[i].entry}&lt;/p&gt;
        &lt;/div&gt;;
  
    }
  
   return(&lt;div&gt;{journalEntries}&lt;/div&gt;);
  </code></pre>
  
  <p>}</p>
  
  <p>When i call this function it renders <code>"&lt;div&gt;[object object]&lt;/div&gt;"</code> and the text between the divs is plain text. </p>
  
  <p>When i change the loop to say "<code>journalEntries = &lt;div....</code>" it renders out the last journal entry as expected, but the issue is that it's not actually appending the journal entries with the loop. </p>
  
  <p>ideas?</p>