React warning: Functions are not valid as a React child

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 { }

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>
  );
}