title: ReactJs 0.14 - Invariant Violation: Objects are not valid as a React child
body: <blockquote>
    <p><strong>I found the error but someone far smarter than me has to explain why, as everything I have read has told me NOT to do it this way, see below response from me .....</strong></p>
  </blockquote>
  
  <p>I am working with react-hot-loader as well. And when I make changes and the page reloads, I receive no error. However, when I manually refresh the page I am receiving error in title above.</p>
  
  <p><strong>Simple JSON data:</strong></p>
  
  <pre><code>const companyBlog = [
  {
      blogTitle: "Company Blog",
      blogLinkTo: "companyBlog",
      blogTagLine: 'If you have any questions, contact us',
      blogPosts: [
          {
              createDate: "2015-02-10T10:50:42.389Z",
              linkTo: "blogPost1Link",
              title: "This is the title to Blog Post 1",
              content: "&lt;p&gt;This is the content to Blog Post 1&lt;/p&gt;",
              author: "John Smith",
              categories: [1, 3]
          },
          {
              createDate: "2015-07-05T10:50:42.389Z",
              linkTo: "blogPost2Link",
              title: "This is the title to Blog Post 2",
              content: "&lt;p&gt;This is the content to Blog Post 2&lt;/p&gt;",
              author: "Jane Doe",
              categories: [2, 3]
          },
          {
              createDate: "2015-04-22T10:50:42.389Z",
              linkTo: "blogPost3Link",
              title: "This is the title to Blog Post 3",
              content: "&lt;p&gt;This is the content to Blog Post 3&lt;/p&gt;",
              author: "John Smith",
              categories: [1, 4]
          }
      ]
    }
  ];
  </code></pre>
  
  <hr>
  
  <p><strong>Get Blog data:</strong></p>
  
  <pre><code>getcompanyBlog() {
      let results = [];
      this.setState({
          blogTitle: companyBlog[0].blogTitle,
          blogLinkTo: companyBlog[0].blogLinkTo,
          blogTagLine: companyBlog[0].blogTagLine
      });
  
      companyBlog[0].blogPosts.map(function (post, index) {
          let dateArry = new Date(post.createDate).toString().split(' ');
          return(
              results.push(
                  &lt;li key= { index }&gt;
                      &lt;time dateTime={ post.createDate }&gt;
                          &lt;span&gt;{ dateArry[1]}&lt;/span&gt;
                          &lt;strong&gt;{ dateArry[2] }&lt;/strong&gt;
                      &lt;/time&gt;
                      &lt;Link to='test'&gt;{ post.title }&lt;/Link&gt;
                  &lt;/li&gt;
              )
          )
      }.bind(this))
      this.setState({blogPosts: results});
  }
  </code></pre>
  
  <p><strong>Render results:</strong></p>
  
  <pre><code>render() {
      return (
          &lt;div&gt;
              { this.state.blogPosts }
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE: Here's my constructor:</strong></p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
          blogTitle: '',
          blogLinkTo: '',
          blogTagLine: '',
          blogPosts: [{
              createDate: '',
              linkTo: '',
              title: '',
              content: '',
              author: '',
              categories: []
          }
          ]
      }
  }
  </code></pre>
  
  <p>I have used this same exact method with the navigation menu and its sub menu items and do not receive any errors. </p>
  
  <blockquote>
    <p><strong>As a curious note</strong>, the error goes away, and the page loads properly, even on manual refresh when I remove 
    <strong>{ this.state.blogPosts }</strong> from the render method. 
    Obviously though, I need that there.</p>
  </blockquote>
  
  <p><strong>And the error message:</strong></p>
  
  <p>Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {createDate, linkTo, title, content, author, categories}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of <code>BlogSideBar</code>.</p>
  
  <p>I haven't a <em>friggin</em> clue what this error is telling me or how to correct.</p>