Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

Question

I want to show the sending posts on my page, but it has an error:

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.

the code is below:

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 => <li key={post.id}>{post.title}</li>);
  }
  UnderHeader() {
    this.props.posts.map(post => {
      return (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.content}</p>
        </div>
      );
    });
  }
  render() {
    return (
      <div>
        <ul>{this.Header}</ul>

        <hr />
        {this.UnderHeader}
      </div>
    );
  }
}

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(<Blog posts={posts} />, rootNode);

i know that the error in this area! render(){ return( <div> <ul> {this.Header} </ul> <hr/> {this.UnderHeader} </div> ) } — Mojax Razmi

Agney Agney · Accepted Answer · 2018-10-09T08:17:15

If you would like to render the JSX,

You have to call the function like this.Header(), this.Header is a function reference does not call it.
You have to return the result of map, `map returns an array of JSX components that needs to be returned from the function.

Code:

const { Component } = React;
const { render } = ReactDOM;

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(){
        return this.props.posts.map((post)=><li key={post.id}>{post.title}</li>)
    }
    UnderHeader(){
        return this.props.posts.map((post)=>{
            return(
                <div key={post.id}>
                    <h1>{post.title}</h1>
                    <p>{post.content}</p>
                </div>
            )
        })
    }
    render(){
        return(
            <div>
                <ul>
                    {this.Header()}
                </ul>

                <hr/>
                {this.UnderHeader()}
            </div>
        )
    }
}

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(
    <Blog posts ={posts}/>,
    rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

1 Answers