Reformatted some old code.

conway.js

// Original code: https://github.com/bonham000/25-react-projects/tree/master/projects/Project_24
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      speed: "fast",
      counter: 0,
      pause: false,
      running: false,
      randomControlValue: 3,
      generationTimer: 5,
      array: [],
    };
    this.renderRandomState = this.renderRandomState.bind(this);
    this.handleCoordinates = this.handleCoordinates.bind(this);
    this.handleStartBtn = this.handleStartBtn.bind(this);
    this.startGame = this.startGame.bind(this);
    this.pauseGame = this.pauseGame.bind(this);
    this.clearAll = this.clearAll.bind(this);
    this.setSlow = this.setSlow.bind(this);
    this.setMedium = this.setMedium.bind(this);
    this.setFast = this.setFast.bind(this);
    this.setFew = this.setFew.bind(this);
    this.setMany = this.setMany.bind(this);
    this.setMost = this.setMost.bind(this);
  }
  handleStartBtn() {
    if (this.state.pause === true) {
      this.setState({
        pause: false,
      });
    }
    this.startGame();
  }
  startGame() {
    var speed = this.state.generationTimer;

    this.setState({
      running: true,
    });

    function pauseGame() {
      clearInterval(timer);
    }

    var check = setInterval(
      function () {
        if (this.state.pause === true) {
          pauseGame();
        }
      }.bind(this),
      5
    );

    var timer = setInterval(
      function () {
        var a = this.state.array.slice();
        generate(a);
      }.bind(this),
      speed
    );

    var generate = function (a) {
      var nextGen = [];
      var verdict;

      for (var x = 1; x < a.length; x++) {
        // Iterate through current array and generate a verdict count based on the status of neighbor cells:
        if (x === 1) {
          verdict = a[x + 1][0] + a[x + 49][0] + a[x + 50][0] + a[x + 51][0];
        } else if (x >= 2 && x <= 49) {
          verdict =
            a[x - 1][0] +
            a[x + 1][0] +
            a[x + 49][0] +
            a[x + 50][0] +
            a[x + 51][0];
        } else if (x === 50) {
          verdict = a[x - 1][0] + a[x + 49][0] + a[x + 50][0];
        } else if (x === 51) {
          verdict =
            a[x + 1][0] +
            a[x - 50][0] +
            a[x - 49][0] +
            a[x + 50][0] +
            a[x + 51][0];
        } else if (x > 51 && x <= 1449) {
          verdict =
            a[x - 1][0] +
            a[x + 1][0] +
            a[x - 49][0] +
            a[x - 50][0] +
            a[x - 51][0] +
            a[x + 49][0] +
            a[x + 50][0] +
            a[x + 51][0];
        } else if (x === 1450) {
          verdict = a[x - 1][0] + a[x + 49][0] + a[x + 50][0];
        } else if (x === 1451) {
          verdict = a[x + 1][0] + a[x - 50][0] + a[x - 51][0];
        } else if (x >= 1452 && x <= 1499) {
          verdict =
            a[x - 1][0] +
            a[x + 1][0] +
            a[x - 49][0] +
            a[x - 50][0] +
            a[x - 51][0];
        } else if (x === 1500) {
          verdict = a[x - 1][0] + a[x - 49][0] + a[x - 50][0];
        }

        // Depending on the current state of each cell and its verdict, render it's fate according to the game rules:
        if (a[x][0] === 0) {
          // If a dead cells has 3 neighbors, a new cell appears; otherwise dead cells stay dead:
          if (verdict === 3) {
            nextGen[x] = [1, "alive"];
          } else {
            nextGen[x] = [0, "dead"];
          }
        } else if (a[x][0] === 1) {
          if (verdict === 0 || verdict === 1) {
            nextGen[x] = [0, "killed"];
          } else if (verdict >= 4) {
            nextGen[x] = [0, "killed"];
          } else if (verdict === 2 || verdict === 3) {
            nextGen[x] = [1, "survivor"];
          }
        }
      }

      // Submit the next generation array for rendering:
      renderNextGeneration(nextGen);
    };

    var renderNextGeneration = function (array) {
      var count = this.state.counter;
      this.setState({
        array: array,
        counter: count + 1,
      });
    }.bind(this);
  }
  pauseGame() {
    this.setState({ pause: true });
  }
  clearAll() {
    var currentArray = this.state.array.slice();
    var newArray = [];
    for (var a = 1; a < currentArray.length; a++) {
      newArray[a] = [0, "dead"];
    }
    this.setState({
      counter: 0,
      pause: true,
      array: newArray,
    });
  }
  handleCoordinates(index) {
    var currentArray = this.state.array.slice();
    if (currentArray[index][0] === 1) {
      currentArray[index] = [0, "dead"];
    } else {
      currentArray[index] = [1, "alive"];
    }
    this.setState({
      array: currentArray,
    });
  }
  renderRandomState() {
    var array = [];
    var width = 800;
    var height = 480;
    var side = width / 50 - 1;
    for (var i = 1; i < 30 * 50 + 1; i++) {
      var rand = Math.round(Math.random(1) * this.state.randomControlValue);
      var condition = "alive";
      if (rand !== 1) {
        rand = 0;
        condition = "dead";
      }
      array[i] = [rand, condition];
    }
    this.setState({
      counter: 0,
      side: side,
      array: array,
    });
  }
  setFast() {
    if (this.state.pause === false && this.state.speed !== "fast") {
      this.setState({
        speed: "fast",
        pause: true,
        generationTimer: 5,
      });
      setTimeout(
        function () {
          this.setState({
            pause: false,
          });
          this.startGame();
        }.bind(this),
        15
      );
    } else if (this.state.pause === true && this.state.speed !== "fast") {
      this.setState({
        speed: "fast",
        generationTimer: 5,
      });
    }
  }
  setMedium() {
    if (this.state.pause === false && this.state.speed !== "medium") {
      this.setState({
        speed: "medium",
        pause: true,
        generationTimer: 500,
      });
      setTimeout(
        function () {
          this.setState({
            pause: false,
          });
          this.startGame();
        }.bind(this),
        15
      );
    } else if (this.state.pause === true && this.state.speed !== "medium") {
      this.setState({
        speed: "medium",
        generationTimer: 500,
      });
    }
  }
  setSlow() {
    if (this.state.pause === false && this.state.speed !== "slow") {
      this.setState({
        speed: "slow",
        pause: true,
        generationTimer: 1000,
      });
      setTimeout(
        function () {
          this.setState({
            pause: false,
          });
          this.startGame();
        }.bind(this),
        15
      );
    } else if (this.state.pause === true && this.state.speed !== "slow") {
      this.setState({
        speed: "slow",
        generationTimer: 1000,
      });
    }
  }
  setMost() {
    this.setState({
      randomControlValue: 3,
    });
  }
  setMany() {
    this.setState({
      randomControlValue: 6,
    });
  }
  setFew() {
    this.setState({
      randomControlValue: 15,
    });
  }
  componentWillMount() {
    this.renderRandomState();
  }
  render() {
    var red = "#F35887";
    var activeRed = "#FF484D";
    var blue = "#487FFF";
    var blueActive = "#00dffc";

    var fastStyle = { background: red };
    var mediumStyle = { background: red };
    var slowStyle = { background: red };

    if (this.state.generationTimer === 5) {
      fastStyle = { background: activeRed };
    } else if (this.state.generationTimer === 500) {
      mediumStyle = { background: activeRed };
    } else if (this.state.generationTimer === 1000) {
      slowStyle = { background: activeRed };
    }

    var fewStyle = { background: blue };
    var manyStyle = { background: blue };
    var mostStyle = { background: blue };

    if (this.state.randomControlValue === 15) {
      fewStyle = { background: blueActive };
    } else if (this.state.randomControlValue === 6) {
      manyStyle = { background: blueActive };
    } else if (this.state.randomControlValue === 3) {
      mostStyle = { background: blueActive };
    }

    return (
      <div>
        <div className="infoBox">
          <p className="generationCount">
            <a
              target="_blank"
              href="https://www.freecodecamp.com/challenges/build-the-game-of-life"
            >
              Conway's Game of Life
            </a>{" "}
            — Current Generation: {this.state.counter}
          </p>
        </div>
        <div className="flexWrapper">
          <div className="controlPanel">
            <div className="controlBtns">
              <button className="startBtn" onClick={this.handleStartBtn}>
                Start{" "}
              </button>
              <br />
              <button className="pauseBtn" onClick={this.pauseGame}>
                Pause{" "}
              </button>
              <br />
              <button className="clearBtn" onClick={this.clearAll}>
                Clear All{" "}
              </button>
              <br />
              <button className="randomBtn" onClick={this.renderRandomState}>
                New Grid
              </button>
            </div>
            <div className="selectRandom">
              <button
                style={mostStyle}
                className="mostBtn"
                onClick={this.setMost}
              >
                Most
              </button>
              <button
                style={manyStyle}
                className="manyBtn"
                onClick={this.setMany}
              >
                Many{" "}
              </button>
              <br />
              <button style={fewStyle} className="fewBtn" onClick={this.setFew}>
                Few
              </button>
              <br />
            </div>
            <div className="speedBtns">
              <button
                style={fastStyle}
                className="fastBtn"
                onClick={this.setFast}
              >
                Fast
              </button>
              <button
                style={mediumStyle}
                className="mediumBtn"
                onClick={this.setMedium}
              >
                Medium{" "}
              </button>
              <br />
              <button
                style={slowStyle}
                className="slowBtn"
                onClick={this.setSlow}
              >
                Slow
              </button>
              <br />
            </div>
          </div>
          <GameBoard
            array={this.state.array}
            side={this.state.side}
            handleCoordinates={this.handleCoordinates}
          />
        </div>
      </div>
    );
  }
}

class GameBoard extends React.Component {
  render() {
    var baseStyle = {
      width: this.props.side,
      height: this.props.side,
      marginTop: 1,
      marginRight: 1,
      padding: 0,
    };

    var arrays = this.props.array.map((item, index) => {
      var boxStyle;

      // Render box background conditionally based on cell state, e.g. alive, survived, killed, dead:
      if (item[1] === "alive") {
        boxStyle = { background: "#00dffc" };
      } else if (item[1] === "survivor") {
        boxStyle = { background: "#2A7CFF" };
      } else if (item[1] === "killed") {
        boxStyle = { background: "#6B66F7" };
      } else if (item[1] === "dead") {
        boxStyle = { background: "none" };
      }

      return (
        <div
          className="gameBox"
          onClick={this.props.handleCoordinates.bind(this, index)}
          style={Object.assign({}, baseStyle, boxStyle)}
          key={index}
        ></div>
      );
    });
    return (
      <div className="boardWrapper">
        <div className="board">{arrays}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("main"));