diff --git a/src/components/Game.js b/src/components/Game.js
index ef28c693..0e015c45 100644
--- a/src/components/Game.js
+++ b/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 (
Game
@@ -27,7 +36,7 @@ const Game = () => {
-
+
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 370a1f75..bbfe0201 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/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 (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{props.index}
-