diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..179c1822 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,11 +3,36 @@ import './FinalPoem.css';
const FinalPoem = (props) => {
+ function showSentence(sentenceArray) {
+ if (sentenceArray) {
+ console.log(sentenceArray);
+ return (
+
+ The
+ {sentenceArray[0]}
+ {sentenceArray[1]}
+ {sentenceArray[2]}
+ {sentenceArray[3]} the
+ {sentenceArray[4]}
+ {sentenceArray[5]}
+ .
+
+ );
+ } else {
+ return null;
+ }
+ }
+
+ function mapSentences(props) {props.finalPoemLines.map((sentenceArray) => {
+ return
Final Poem
-
+ {mapSentences(props)}
+ {/* I'm able to see the state via console.log, but the sentences won't display */}
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..44510505 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,16 @@ class Game extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ playerInputs: [], // This will be an array of arrays
+ };
+ }
+
+ addPlayerInputWordsArray = (inputWordsArray) => {
+ this.setState((state, props) => ({
+ playerInputs: [...state.playerInputs, inputWordsArray]
+ }));
}
render() {
@@ -32,11 +42,11 @@ class Game extends Component {
{ exampleFormat }
-
+
-
+
-
+
);
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..832657f9 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,24 +5,79 @@ class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ [0]: "", // Initialize value for each input to empty string
+ [1]: "",
+ [2]: "",
+ [3]: "",
+ [4]: "",
+ [5]: "",
+ };
+ }
+
+ textInputChange(event, inputId) {
+ this.setState({[inputId]: event.target.value});
+ }
+
+ sendPlayerInputWordsArray = (e) => {
+ e.preventDefault();
+ const inputWords = [this.state[0], this.state[1], this.state[2], this.state[3], this.state[4], this.state[5]];
+ this.props.addPlayerInputWordsArray(inputWords);
}
render() {
return (
-
Player Submission Form for Player #{ }
-
-