React warning: Functions are not valid as a React child

Question

I have this react component. This is not rendering properly but getting an annoying warning like

Functions are not valid as a React child. This may happen if you return a Component instead of from the render. Or maybe you meant to call this function rather than return it.

Here's my component. What am I doing wrong here?

import React, { Component } from 'react';

class Squares extends Component {   

    constructor(props){
        super(props);
        this.createSquare = this.createSquare.bind(this);
    }

    createSquare() {
        let indents = [], rows = this.props.rows, cols = this.props.cols;
        let squareSize = 50;
        for (let i = 0; i < rows; i++) {
            for (let j = 0; i < cols; j++) {
                let topPosition = j * squareSize;
                let leftPosition = i * squareSize;
                let divStyle = {
                    top: topPosition+'px', 
                    left: leftPosition+'px'
                };
                indents.push(<div style={divStyle}></div>);
            }   
          }
        return indents;
    }    

    render() {
      return (
        <div>
            {this.createSquare()}
        </div>
      );
    }
}

export default Squares;

UPDATE

@Ross Allen - After making that change, the render method seems to be in infinite loop with potential memory crash

you are passing the function reference as a child. that should technically be {this.createSquare()} — Sreekanth, Jul 07 '18 at 05:20
Why is the error message not clear? There are only two places where you are passing a child. — Felix Kling, Jul 07 '18 at 05:28
@FelixKling: yes the error message is little confusing. Even after I immediately called the function createSquare(), I'm getting memory error. — Arindam Sahu, Jul 07 '18 at 06:22
You are creating `rows * cols` many elements. If you pass large values for these props then that could certainly happen. — Felix Kling, Jul 07 '18 at 06:38
@FelixKling: I’m passing 10 rows and 10 column from prop. Even tried with hard coded data. Problem still exists — Arindam Sahu, Jul 07 '18 at 06:41
Also, what exactly is confusing about the error message? Only actionable feedback helps to make error messages more useful. — Felix Kling, Jul 07 '18 at 06:41
Appreciate it. That made the error go away. Regarding the error message - Now when I re-read it, it makes sense for immediate calling the function — Arindam Sahu, Jul 07 '18 at 06:52
Please don’t correct the original code block. That makes it difficult for people with a similar same problem to see how it was fixed. — Brandon Durham, Nov 04 '18 at 15:45

score 29 · Accepted Answer · answered Jul 07 '18 at 05:21

29

You need to call createSquare, right now you're just passing a reference to the function. Add parentheses after it:

render() {
  return (
    <div>
      {this.createSquare()}
    </div>
  );
}

answered Jul 07 '18 at 05:21

Ross Allen

40,801
12
92
89

1

Just updated my question. Getting memory crash error because of infinite loop after making the change. Any insights on why is that happening ? To be more precise the indent array length is around 5062116. – Arindam Sahu Jul 07 '18 at 06:13
That means the relationship between your components you are trying to call is happening in a loop somewhere. So the parent gets called, calls that component which triggers somewhere for that parent to get called again. – Jacob Aug 29 '18 at 00:40
@ArindamSahu Hey there, i just ran into the same issue, having the infinite loop complain, did you figure out how to solve this? – Hai Na Zheng Aug 20 '20 at 12:39

score 3 · Answer 2 · answered Jul 07 '18 at 05:56

React uses JSX to render HTML and return function within render() should contain only HTML elements and any expression that needed to be evaluated must be within { } as explanied in https://reactjs.org/docs/introducing-jsx.html. But the best practice would be to do any operation outside return just inside render() where you can store the values and refer them in the return() and restrict usage of { } to just simple expression evaluation. Refer for In depth JSX integration with React https://reactjs.org/docs/jsx-in-depth.html

render() {
var sq = this.createSquare();
return (
  <div>
    {sq}
  </div>
);

Ross Allen's answer is also fine , the point is Inside JSX enclose any operation / evaluation inside { }

score -2 · Answer 3 · answered Jan 02 '19 at 21:22

-2

You just need to remove () from your function call.

render() {
  return (
    <div>
        {this.createSquare}
    </div>
  );
}

answered Jan 02 '19 at 21:22

HaMiD Sani

189
2
18

React warning: Functions are not valid as a React child

3 Answers3

Linked