title: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render
body: <p>I want to show the sending posts on my page, but it has an error:</p>
  
  <blockquote>
    <p>Functions are not valid as a React child. This may happen if you
    return a Component instead of  from render. Or maybe you
    meant to call this function rather than return it.</p>
  </blockquote>
  
  <p>the code is below:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  
  const rootNode = document.getElementById('root');
  
  class Blog extends Component {
    constructor(props) {
      super(props);
      this.Header = this.Header.bind(this);
      this.UnderHeader = this.UnderHeader.bind(this);
    }
    Header() {
      this.props.posts.map(post =&gt; &lt;li key={post.id}&gt;{post.title}&lt;/li&gt;);
    }
    UnderHeader() {
      this.props.posts.map(post =&gt; {
        return (
          &lt;div key={post.id}&gt;
            &lt;h1&gt;{post.title}&lt;/h1&gt;
            &lt;p&gt;{post.content}&lt;/p&gt;
          &lt;/div&gt;
        );
      });
    }
    render() {
      return (
        &lt;div&gt;
          &lt;ul&gt;{this.Header}&lt;/ul&gt;
  
          &lt;hr /&gt;
          {this.UnderHeader}
        &lt;/div&gt;
      );
    }
  }
  
  const posts = [
    { id: 1, title: 'title1', content: 'content1' },
    { id: 2, title: 'title2', content: 'content2' },
    { id: 3, title: 'title3', content: 'content3' },
    { id: 4, title: 'title4', content: 'content4' }
  ];
  
  render(&lt;Blog posts={posts} /&gt;, rootNode);
  </code></pre>