Move generation function to lib

src/Board.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Cell from './Cell';
 import Controls from './Controls';
-import { countLivingNeighbors } from './lib';
+import { generateNewGrid } from './lib';
 
 interface Props {
   width?: number;
@@ -32,32 +32,8 @@ class Board extends React.Component<Props, State> {
 
   start = () => {
     this.timer = setInterval(() => {
-      console.log('Iterating');
-      const { grid } = this.state;
-      const newGrid = [...grid].map((row, y) => {
-        const newRow = [...row].map((cell, x) => {
-          const isAlive = cell;
-          const livingNeighbors = countLivingNeighbors(grid, x, y);
-
-          if (isAlive) {
-            if (livingNeighbors === 2 || livingNeighbors === 3) {
-              return true;
-            } else {
-              return false;
-            }
-          } else {
-            if (livingNeighbors === 3) {
-              return true;
-            }
-          }
-
-          return isAlive;
-        });
-
-        return newRow;
-      });
-
-      this.setState({ grid: newGrid });
+      const grid = generateNewGrid(this.state.grid);
+      this.setState({ grid });
     }, this.state.speed);
   };
 

src/lib.ts

@@ -1,3 +1,28 @@
+export const generateNewGrid = (grid: boolean[][]) => {
+  return [...grid].map((row, y) => {
+    const newRow = [...row].map((cell, x) => {
+      const isAlive = cell;
+      const livingNeighbors = countLivingNeighbors(grid, x, y);
+
+      if (isAlive) {
+        if (livingNeighbors === 2 || livingNeighbors === 3) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        if (livingNeighbors === 3) {
+          return true;
+        }
+      }
+
+      return isAlive;
+    });
+
+    return newRow;
+  });
+};
+
 export const countLivingNeighbors = (
   grid: boolean[][],
   x: number,