Progress on answer key form

src/components/AnswerKeyForm/QuestionsRow.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function(props) {
+  const cells = [...Array(props.numQuestions).keys()].map((question, index) => (
+    <td key={index}>
+      <input
+        name={'answer_' + props.testNum + ',' + question}
+        type="text"
+        onChange={props.handleInputChange}
+      />
+    </td>
+  ));
+
+  return (
+    <tr className="answerkeyform__table__questionrow">
+      <th>{props.testNum}</th>
+      {cells}
+    </tr>
+  );
+}

src/components/AnswerKeyForm/index.css

@@ -0,0 +1,11 @@
+.answerkeyform {
+}
+
+.answerkeyform__table input {
+  width: 4rem;
+  margin: 0;
+}
+
+.answerkeyform__table__questionrow td {
+  padding: 1rem;
+}

src/components/AnswerKeyForm/index.js

@@ -1,11 +1,79 @@
-import React, {Component} from 'react';
+import React from 'react';
 import './index.css';
+import QuestionsRow from './QuestionsRow';
+
+class AnswerKeyForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      courseName: '',
+      answers: Array(props.numberOfTests).fill(
+        Array(props.numberOfQuestionsPerTest)
+      ),
+    };
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    console.log(this.state.answers);
+  }
+
+  handleAnswerChange(test, question) {
+    const answers = this.state.answers.slice();
+    const testAnswers = answers[test];
+    testAnswers[question] = value;
+
+    this.setState({
+      answers: answers,
+    });
+  }
+
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value,
+    });
+
+    console.log(this.state);
+  }
 
-class AnswerKeyForm extends Component {
   render() {
+    const testRows = [...Array(this.props.numberOfTests).keys()].map(
+      (test, index) => (
+        <QuestionsRow
+          key={index}
+          testNum={test + 1}
+          numQuestions={this.props.numberOfQuestionsPerTest}
+          handleInputChange={() => this.handleAnswerChange(testNum)}
+        />
+      )
+    );
+
     return (
       <div className="answerkeyform">
         <h1>New Answer Key</h1>
+        <form>
+          <label>Course name</label>
+          <input
+            type="text"
+            name="courseName"
+            value={this.state.courseName}
+            onChange={this.handleInputChange}
+          />
+
+          <table className="u-full-width answerkeyform__table">
+            <thead>
+              <tr>
+                <th colSpan={this.props.numberOfQuestionsPerTest + 1}>
+                  Test answers
+                </th>
+              </tr>
+            </thead>
+            <tbody>{testRows}</tbody>
+          </table>
+        </form>
       </div>
     );
   }

src/components/App.js

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import Header from './Header';
+import NavBar from './NavBar';
 import AnswerKeyForm from './AnswerKeyForm';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <Header />
+        <NavBar />
         <div className="container">
-          <AnswerKeyForm />
+          <AnswerKeyForm numberOfTests={10} numberOfQuestionsPerTest={10} />
         </div>
       </div>
     );