Working answer key form (saving to state at least)

src/components/AnswerKeyForm/QuestionsRow.js

@@ -4,9 +4,8 @@ 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}
+        onChange={event => props.onChange(event.target, question)}
       />
     </td>
   ));

src/components/AnswerKeyForm/index.css

@@ -2,10 +2,12 @@
 }
 
 .answerkeyform__table input {
-  width: 4rem;
+  width: 3rem;
+  height: 3rem;
   margin: 0;
+  padding: 1rem;
 }
 
 .answerkeyform__table__questionrow td {
-  padding: 1rem;
+  padding: 0.5rem;
 }

src/components/AnswerKeyForm/index.js

@@ -8,23 +8,25 @@ class AnswerKeyForm extends React.Component {
 
     this.state = {
       courseName: '',
-      answers: Array(props.numberOfTests).fill(
-        Array(props.numberOfQuestionsPerTest)
+      answers: Array(props.numberOfTests * props.numberOfQuestionsPerTest).fill(
+        null
       ),
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleAnswerChange = this.handleAnswerChange.bind(this);
     console.log(this.state.answers);
   }
 
-  handleAnswerChange(test, question) {
+  handleAnswerChange(target, answerIndex) {
     const answers = this.state.answers.slice();
-    const testAnswers = answers[test];
-    testAnswers[question] = value;
+    answers[answerIndex] = target.value;
 
     this.setState({
       answers: answers,
     });
+
+    console.log(answers);
   }
 
   handleInputChange(event) {
@@ -46,7 +48,9 @@ class AnswerKeyForm extends React.Component {
           key={index}
           testNum={test + 1}
           numQuestions={this.props.numberOfQuestionsPerTest}
-          handleInputChange={() => this.handleAnswerChange(testNum)}
+          onChange={(target, question) =>
+            this.handleAnswerChange(target, (test + 1) * question)
+          }
         />
       )
     );
@@ -63,6 +67,7 @@ class AnswerKeyForm extends React.Component {
             onChange={this.handleInputChange}
           />
 
+          <h2>Test Answers</h2>
           <table className="u-full-width answerkeyform__table">
             <thead>
               <tr>