Fire - Madeline

src/components/Game.js

@@ -13,6 +13,15 @@ const Game = () => {
     }
   }).join(' ');
 
+  const [submissions, setSubmissions] = useState([]); 
+
+  const sendSubmission = newSubmission => {
+    console.log(submissions);
+    submissions.push(newSubmission);
+    setSubmissions(submissions);
+    console.log(submissions.length);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -27,7 +36,7 @@ const Game = () => {
 
       <RecentSubmission />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm fields={FIELDS} sendSubmission={sendSubmission} index={submissions.length + 1}/>
 
       <FinalPoem />
 

src/components/PlayerSubmissionForm.js

@@ -3,21 +3,76 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = props => {
+
+  const [formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: ''
+  });
+
+  // // validate input is text
+  // const validInput = () => {
+  //   return formFields.match(/^[A-Za-z]+$/) || formFields === '';
+  // }
+
+  // event handlers
+  // when a form field changes (user types in it)
+  // update the state with the updated value
+  const onInputChange = event => {
+    // duplicate formFields into new object
+    const newFormFields = {
+      ...formFields
+    };
+
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  };
+
+  const onFormSubmit = event => {
+    // prevent the form from being submitted
+    event.preventDefault();
+
+    console.log(formFields);
+    props.sendSubmission(formFields);
+
+    // Clear the form
+    setFormFields({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    });
+  };
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.index}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
           {
-            // Put your form inputs here... We've put in one below as an example
+            props.fields.map((field, index) => {
+              if (typeof field == 'string') {
+                return <span>{field}</span>;
+              }
+
+              return <input
+                key={index}
+                name={field.key}
+                placeholder={field.placeholder}
+                type="text"
+                value={formFields[field.key]}
+                onChange={onInputChange} />
+            })
           }
-          <input
-            placeholder="hm..."
-            type="text" />
 
         </div>