diff --git a/02-props-state-component-architecture/state/.gitignore b/02-props-state-component-architecture/state/.gitignore
deleted file mode 100644
index 3c3629e6..00000000
--- a/02-props-state-component-architecture/state/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-node_modules
diff --git a/02-props-state-component-architecture/state/sean-answer-files/App.js b/02-props-state-component-architecture/state/sean-answer-files/App.js
new file mode 100644
index 00000000..c5143ad3
--- /dev/null
+++ b/02-props-state-component-architecture/state/sean-answer-files/App.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import './App.css';
+
+import ColorBox from "./color_box.js";
+
+class App extends Component {
+ constructor(props){
+ super(props);
+
+ let boxes = [];
+ const boxNum = 28;
+
+ for(let i = 0; i < boxNum; i++){
+ let rColor = this.randomColor();
+ boxes.push({
+ id: i,
+ color: rColor
+ });
+ }
+ this.state = {boxes};
+
+ setInterval(() => {
+ const nBoxes = this.state.boxes.slice();
+ const rBoxIndx = Math.floor(Math.random() * nBoxes.length);
+ nBoxes[rBoxIndx] = Object.assign({}, nBoxes[rBoxIndx], {
+ color: this.randomColor()
+ });
+ this.setState({
+ boxes: nBoxes
+ });
+ }, 300);
+ }
+
+ randomColor(){
+ let colorIndx = Math.floor(Math.random() * this.props.colors.length);
+ return this.props.colors[colorIndx];
+ }
+ render() {
+ //Right after the RENDER is where all your LOGIC goes
+ const boxes = this.state.boxes.map(box => (
+
+ ));
+
+ // After the RETURN is where anything that has to do with HTML in the component goes
+ return (
+
{boxes}
+ );
+}
+}
+
+App.defaultProps = {
+ colors: ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond",
+ "Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate",
+ "Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod",
+ "DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange",
+ "DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey",
+ "DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue",
+ "FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod",
+ "Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki",
+ "Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan",
+ "LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon",
+ "LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow",
+ "Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid",
+ "MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise",
+ "MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy",
+ "OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen",
+ "PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue",
+ "Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen",
+ "SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen",
+ "SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke",
+ "Yellow","YellowGreen"]
+}
+
+export default App;
diff --git a/02-props-state-component-architecture/state/sean-answer-files/App_clickEvent.js b/02-props-state-component-architecture/state/sean-answer-files/App_clickEvent.js
new file mode 100644
index 00000000..f6da0579
--- /dev/null
+++ b/02-props-state-component-architecture/state/sean-answer-files/App_clickEvent.js
@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import './App.css';
+
+import ColorBox from "./color_box.js";
+
+class App extends Component {
+ constructor(props){
+ super(props);
+
+ let boxes = [];
+ const boxNum = 28;
+
+ for(let i = 0; i < boxNum; i++){
+ let rColor = this.randomColor();
+ boxes.push({
+ id: i,
+ color: rColor
+ });
+ }
+ this.state = {boxes};
+
+ this.changeColor = this.changeColor.bind(this);
+ }
+
+ changeColor(e){
+ console.log(e.target.id)
+ const updatedBoxes = this.state.boxes.map( box => {
+ if(box.id == e.target.id){
+ box.color = this.randomColor();
+ }
+ return box;
+ });
+ this.setState({boxes: updatedBoxes})
+ }
+
+
+ randomColor(){
+ let colorIndx = Math.floor(Math.random() * this.props.colors.length);
+ return this.props.colors[colorIndx];
+ }
+ render() {
+ //Right after the RENDER is where all your LOGIC goes
+ const boxes = this.state.boxes.map(box => (
+
+ ));
+
+ // After the RETURN is where anything that has to do with HTML in the component goes
+ return (
+ {boxes}
+ );
+}
+}
+
+App.defaultProps = {
+ colors: ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond",
+ "Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate",
+ "Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod",
+ "DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange",
+ "DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey",
+ "DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue",
+ "FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod",
+ "Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki",
+ "Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan",
+ "LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon",
+ "LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow",
+ "Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid",
+ "MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise",
+ "MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy",
+ "OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen",
+ "PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue",
+ "Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen",
+ "SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen",
+ "SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke",
+ "Yellow","YellowGreen"]
+}
+
+export default App;
diff --git a/02-props-state-component-architecture/state/sean-answer-files/ColorBox.css b/02-props-state-component-architecture/state/sean-answer-files/ColorBox.css
new file mode 100644
index 00000000..449420bb
--- /dev/null
+++ b/02-props-state-component-architecture/state/sean-answer-files/ColorBox.css
@@ -0,0 +1,7 @@
+.box {
+ width: 190px;
+ height: 190px;
+ display: inline-block;
+ margin-bottom: 0;
+ padding-bottom: 0;
+}
\ No newline at end of file
diff --git a/02-props-state-component-architecture/state/sean-answer-files/color_box.js b/02-props-state-component-architecture/state/sean-answer-files/color_box.js
new file mode 100644
index 00000000..c9d28648
--- /dev/null
+++ b/02-props-state-component-architecture/state/sean-answer-files/color_box.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import "./ColorBox.css"
+
+class ColorBox extends Component {
+ render() {
+ const style = {
+ backgroundColor: this.props.color
+ };
+ return (
+
+ );
+ }
+}
+
+export default ColorBox;
\ No newline at end of file