title: React warning: Functions are not valid as a React child
body: <p>I have this react component. This is not rendering properly but getting an annoying warning like </p>
  
  <p>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.</p>
  
  <p>Here's my component. What am I doing wrong here?</p>
  
  <pre><code>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 &lt; rows; i++) {
              for (let j = 0; i &lt; cols; j++) {
                  let topPosition = j * squareSize;
                  let leftPosition = i * squareSize;
                  let divStyle = {
                      top: topPosition+'px', 
                      left: leftPosition+'px'
                  };
                  indents.push(&lt;div style={divStyle}&gt;&lt;/div&gt;);
              }   
            }
          return indents;
      }    
  
      render() {
        return (
          &lt;div&gt;
              {this.createSquare()}
          &lt;/div&gt;
        );
      }
  }
  
  export default Squares;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>@Ross Allen - After making that change, the render method seems to be in infinite loop with potential memory crash</p>