React App - Help me locate the cause of an infinite render loop

Question

I'm somehow causing an infinite render loop when calling the appendModule function. I think it's being caused by the rows.js component as I recently split 4 rows out into seperate components and then imported them into one master rows.js and thats when the problem started. (note: I understand things aren't very tidy/optimal right now).

main.js In this component I push module components into an array onclick

import React, { Component } from "react";
import Mod0 from "./modules/mod0";
import Mod1 from "./modules/mod1";
import Mod2 from "./modules/mod2";
class Main extends Component {
  constructor() {
    super();
    this.state = {
      moduleArray: this.moduleArray
    };

    this.moduleArray = [];
  }
  appendModule = x => e => {
    switch (x) {
      case 0:
        this.moduleArray.push(
          <div
            key={this.moduleArray.length}
            id={this.moduleArray.length}
            style={{ fontSize: 0, lineHeight: 0 }}
          >
            <Mod0 />
          </div>
        );
        break;
      case 1:
        this.moduleArray.push(
          <div
            key={this.moduleArray.length}
            id={this.moduleArray.length}
            style={{ fontSize: 0, lineHeight: 0 }}
          >
            <Mod1 />
          </div>
        );
        break;
      case 2:
        this.moduleArray.push(
          <div
            key={this.moduleArray.length}
            id={this.moduleArray.length}
            style={{ fontSize: 0, lineHeight: 0 }}
          >
            <Mod2 />
          </div>
        );
        break;
      default:
    }
    this.setState({
      moduleArray: this.moduleArray
    });
  };

  console = () => {
    return (
      <div
        id="console-root"
        style={{ display: this.state.consoleState ? "block" : "none" }}
      >
        <div id="console">
          <input
            onClick={this.appendModule(0)}
            value="Single col"
            type="submit"
          />
          <input
            onClick={this.appendModule(1)}
            value="Double col"
            type="submit"
          />
          <input
            onClick={this.appendModule(2)}
            value="Triple col"
            type="submit"
          />
        </div>
      </div>
    );
  };

  render() {
    return (
      <>
        {this.console()}
        <div id="email-root">
          <div id="mods">{this.moduleArray}</div>
        </div>
      </>
    );
  }
}
export default Main;

mod0.js The below component is an example of the modules that contain the rows component.

import React from "react";
import Rows from "./../rows/rows";
class Mod1 extends React.Component {
  render() {
    return (
      <table
        id="Table1"
        cellSpacing={0}
        cellPadding={0}
        border={0}
        width="100%"
      >
        <tbody>
          <tr>
            <td
              valign="top"
              align="center"
              style={{ borderCollapse: "collapse", borderWidth: 0 }}
              bgcolor="#D9E1E2"
            >
              <table
                className="Table2"
                bgcolor="#FFFFFF"
                cellSpacing={0}
                cellPadding={0}
                border={0}
                width={680}
              >
                <tbody>
                  <tr>
                    <td
                      style={{ paddingTop: 24, paddingBottom: 24 }}
                      align="center"
                    >
                      <table
                        className="Table3"
                        align="center"
                        cellSpacing={0}
                        cellPadding={0}
                        border={0}
                        width={604}
                      >
                        <tbody>
                          <Rows />
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}
export default Mod1;

rows.js The new <Rows /> component that I think is causing the problem. The rows are in an array like that so that I can add and remove them later. The problem persists if that are directly included.

import React from "react";
import Row0 from "./rows";
import Row1 from "./rows";
import Row2 from "./rows";
import Row3 from "./rows";
class Rows extends React.Component {
  constructor() {
    super();
    this.state = {
      rowArray: this.rowArray
    };
    this.rowArray = [
      <Row0 key="0" />,
      <Row1 key="1" />,
      <Row2 key="2" />,
      <Row3 key="3" />
    ];
    console.log(this.rowArray);
  }
  render() {
    return <>{this.rowArray}</>;
  }
}
export default Rows;

row1.js An example of one of the individual row components imported into rows.js

import React from "react";
class Row1 extends React.Component {
  render() {
    return (
      <tr>
        <td
          className="mobile-pad"
          style={{
            color: "#4a4a4a",
            fontFamily: '"Campton", Helvetica, Arial, sans-serif',
            fontSize: "26px",
            lineHeight: "36px",
            textAlign: "left",
            paddingTop: 0,
            paddingBottom: "18px"
          }}
        >
          This is header copy
        </td>
      </tr>
    );
  }
}
export default Row1;

Answer 1

I believe your issue could be that instead of passing the function to onClick , you're calling the function. Try this instead: onClick={() => { this.appendModule(0) }} and let me know how it went

NOTE:

this uses arrow functions, introduced in ES6. You can also do onClick={ this.appendModule.bind(this, 0) } if the former way doesn't work.