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}

-
+
{ - // Put your form inputs here... We've put in one below as an example + props.fields.map((field, index) => { + if (typeof field == 'string') { + return {field}; + } + + return + }) } -