From 1d683f6dcd9ef91f427ba0278f0afc0cd66e3c9b Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Thu, 7 Jan 2021 15:59:35 -0800
Subject: [PATCH 1/9] Implement PlayerSubmissionForm with hard-coded input
 elements

---
 src/components/Game.js                 | 15 ++++-
 src/components/Game.test.js            |  2 +-
 src/components/PlayerSubmissionForm.js | 83 ++++++++++++++++++++++----
 3 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index ef28c693..7d1ae915 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,6 +13,19 @@ const Game = () => {
     }
   }).join(' ');
 
+  const [playerNumber, setPlayerNumber] = useState(1);
+  const [submissionList, setSubmissionList] = useState([]);
+
+  const addPlayerSubmission = submission => {
+    const newSubmissionList = [...submissionList];
+
+    newSubmissionList.push({submission});
+
+    setSubmissionList(newSubmissionList);
+    const nextPlayer = playerNumber + 1;
+    setPlayerNumber(nextPlayer);
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -27,7 +40,7 @@ const Game = () => {
 
       <RecentSubmission />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} />
 
       <FinalPoem />
 
diff --git a/src/components/Game.test.js b/src/components/Game.test.js
index f90ec3bd..1c04c403 100644
--- a/src/components/Game.test.js
+++ b/src/components/Game.test.js
@@ -37,7 +37,7 @@ const FIELDS = [
 
 const INPUT_FIELDS = FIELDS.filter((element) => typeof element !== 'string');
 
-describe.skip('Game', () => {
+describe('Game', () => {
 
   describe('Wave 1:  Rendering Game', () => {
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 370a1f75..2c114876 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -3,22 +3,85 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const [formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adverb: '',
+    verb: '',
+    adj2: '',
+    noun2: ''
+  });
+
+  const onInputChange = event => {
+    const newFormFields = {
+      ...formFields
+    };
+
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  }
+
+  const onFormSubmit = event => {
+    event.preventDefault();
+
+    props.sendSubmission(formFields);
+
+    setFormFields({
+      adj1: '',
+      noun1: '',
+      adverb: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    });
+  }
+
+  // const inputValid = (event) => {
+  //   return formFields[event.target.name] === '';
+  // }
+  
   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
-          }
+          The
           <input
-            placeholder="hm..."
-            type="text" />
-
+          name="adj1"
+          onChange={onInputChange}
+          placeholder="adjective1"
+          type="text" />
+          <input
+          name="noun1"
+          onChange={onInputChange}
+          placeholder="noun1"
+          type="text" />
+          <input
+          name="adverb"
+          onChange={onInputChange}
+          placeholder="adverb1"
+          type="text" />
+          <input
+          name="verb"
+          onChange={onInputChange}
+          placeholder="verb1"
+          type="text" />
+          the
+          <input
+          name="adj2"
+          onChange={onInputChange}
+          placeholder="adjective2"
+          type="text" />
+          <input
+          name="noun2"
+          onChange={onInputChange}
+          placeholder="noun2"
+          type="text" />
+          .
         </div>
 
         <div className="PlayerSubmissionForm__submit">

From d9b8b26bdc5c9b39da146fc7d49e86c42e6fb4de Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Thu, 7 Jan 2021 21:22:34 -0800
Subject: [PATCH 2/9] Implement RecentSubmission and change submissionList to
 be array of strings

---
 src/components/FinalPoem.js             |  2 +-
 src/components/Game.js                  | 12 ++--
 src/components/PlayerSubmissionForm.js  | 73 +++++++++++--------------
 src/components/RecentSubmission.js      |  2 +-
 src/components/RecentSubmission.test.js |  2 +-
 5 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index b466d849..1e3bba8d 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -12,7 +12,7 @@ const FinalPoem = (props) => {
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.revealPoem} />
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index 7d1ae915..093a9efb 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -15,17 +15,19 @@ const Game = () => {
 
   const [playerNumber, setPlayerNumber] = useState(1);
   const [submissionList, setSubmissionList] = useState([]);
+  const [isSubmitted, setIsSubmitted] = useState(false);
 
   const addPlayerSubmission = submission => {
     const newSubmissionList = [...submissionList];
 
-    newSubmissionList.push({submission});
+    newSubmissionList.push(submission);
 
     setSubmissionList(newSubmissionList);
-    const nextPlayer = playerNumber + 1;
-    setPlayerNumber(nextPlayer);
+    setPlayerNumber(playerNumber + 1);
   };
 
+  const lastSubmission = submissionList.pop();
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -38,11 +40,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission submission={lastSubmission}/>
 
       <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} />
 
-      <FinalPoem />
+      <FinalPoem isSubmitted={isSubmitted} submission={submissionList} />
 
     </div>
   );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 2c114876..2b785b49 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -7,7 +7,7 @@ const PlayerSubmissionForm = (props) => {
   const [formFields, setFormFields] = useState({
     adj1: '',
     noun1: '',
-    adverb: '',
+    adv: '',
     verb: '',
     adj2: '',
     noun2: ''
@@ -18,28 +18,51 @@ const PlayerSubmissionForm = (props) => {
       ...formFields
     };
 
-    newFormFields[event.target.name] = event.target.value;
+    const { name, value } = event.target;
+
+    newFormFields[name] = value;
+
     setFormFields(newFormFields);
-  }
+  };
 
   const onFormSubmit = event => {
     event.preventDefault();
 
-    props.sendSubmission(formFields);
+    const playerSubmission = props.fields.map(field => {
+      const submittedFields = {...formFields};
+      if (field.key) {
+        return submittedFields[field.key]
+      } else {
+        return field
+      }
+    }).join(' '); 
+
+    props.sendSubmission(playerSubmission);
 
     setFormFields({
       adj1: '',
       noun1: '',
-      adverb: '',
+      adv: '',
       verb: '',
       adj2: '',
       noun2: ''
     });
   }
 
-  // const inputValid = (event) => {
-  //   return formFields[event.target.name] === '';
-  // }
+  const generateFormFields = props.fields.map(field => {
+    if (field.key) {
+      return <input 
+              key={field.key}
+              className={formFields[field.key] === '' ? '.PlayerSubmissionFormt__input--invalid' : ''}
+              name={field.key}
+              value={formFields[field.key]}
+              onChange={onInputChange}
+              placeholder={field.placeholder}
+              type="text" />
+    } else {
+      return field
+    }
+  });
   
   return (
     <div className="PlayerSubmissionForm">
@@ -49,39 +72,7 @@ const PlayerSubmissionForm = (props) => {
             onSubmit={onFormSubmit} >
 
         <div className="PlayerSubmissionForm__poem-inputs">
-          The
-          <input
-          name="adj1"
-          onChange={onInputChange}
-          placeholder="adjective1"
-          type="text" />
-          <input
-          name="noun1"
-          onChange={onInputChange}
-          placeholder="noun1"
-          type="text" />
-          <input
-          name="adverb"
-          onChange={onInputChange}
-          placeholder="adverb1"
-          type="text" />
-          <input
-          name="verb"
-          onChange={onInputChange}
-          placeholder="verb1"
-          type="text" />
-          the
-          <input
-          name="adj2"
-          onChange={onInputChange}
-          placeholder="adjective2"
-          type="text" />
-          <input
-          name="noun2"
-          onChange={onInputChange}
-          placeholder="noun2"
-          type="text" />
-          .
+          {generateFormFields}
         </div>
 
         <div className="PlayerSubmissionForm__submit">
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 4cf7b542..e1a14366 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -6,7 +6,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.submission }</p>
     </div>
   );
 }
diff --git a/src/components/RecentSubmission.test.js b/src/components/RecentSubmission.test.js
index 3eee278c..0bbeb345 100644
--- a/src/components/RecentSubmission.test.js
+++ b/src/components/RecentSubmission.test.js
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import RecentSubmission from './RecentSubmission';
 
 
-describe.skip('Wave 2:  RecentSubmission', () => {
+describe('Wave 2:  RecentSubmission', () => {
   test('It renders with a submission and shows the text', () => {
     // Act
     render(<RecentSubmission submission={'This is a submission'} />);

From ce5946b80ef0c06d5d0c7bdb41fdefacde03bcff Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Thu, 7 Jan 2021 21:51:51 -0800
Subject: [PATCH 3/9] Pass in props to FinalPoem

---
 src/components/FinalPoem.js            | 6 +++++-
 src/components/FinalPoem.test.js       | 2 +-
 src/components/Game.js                 | 6 +++++-
 src/components/PlayerSubmissionForm.js | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 1e3bba8d..d894cd40 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -4,6 +4,10 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const onButtonClick = () => {
+    props.revealPoem();
+  };
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
@@ -12,7 +16,7 @@ const FinalPoem = (props) => {
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.revealPoem} />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClick} />
       </div>
     </div>
   );
diff --git a/src/components/FinalPoem.test.js b/src/components/FinalPoem.test.js
index 01eb3333..987959d3 100644
--- a/src/components/FinalPoem.test.js
+++ b/src/components/FinalPoem.test.js
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import FinalPoem from './FinalPoem';
 
-describe.skip('FinalPoem', () => {
+describe('FinalPoem', () => {
   describe('before the poem is finished', () => {
     test('it renders with a button when isSubmitted is false', () => {
       // Act
diff --git a/src/components/Game.js b/src/components/Game.js
index 093a9efb..f8ad6eba 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -28,6 +28,10 @@ const Game = () => {
 
   const lastSubmission = submissionList.pop();
 
+  const revealPoem = () => {
+    setIsSubmitted(true);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -44,7 +48,7 @@ const Game = () => {
 
       <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} />
 
-      <FinalPoem isSubmitted={isSubmitted} submission={submissionList} />
+      <FinalPoem isSubmitted={isSubmitted} submission={submissionList} revealPoem={revealPoem} />
 
     </div>
   );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 2b785b49..a602f594 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -55,7 +55,7 @@ const PlayerSubmissionForm = (props) => {
               key={field.key}
               className={formFields[field.key] === '' ? '.PlayerSubmissionFormt__input--invalid' : ''}
               name={field.key}
-              value={formFields[field.key]}
+              value={formFields[field.key] || ''}
               onChange={onInputChange}
               placeholder={field.placeholder}
               type="text" />

From 73c2b9a58139f269a167be94f7c988c714265c70 Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Thu, 7 Jan 2021 22:59:57 -0800
Subject: [PATCH 4/9] Implement FinalPoem

---
 src/components/FinalPoem.js            | 32 ++++++++++++++------------
 src/components/Game.js                 | 10 ++++----
 src/components/PlayerSubmissionForm.js |  6 ++---
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d894cd40..7744c259 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -4,22 +4,24 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  const onButtonClick = () => {
-    props.revealPoem();
-  };
-
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClick} />
+  if (props.isSubmitted) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {props.submissions.map((line, i) => <p key={i}>{line}</p>)}
+        </section>
       </div>
-    </div>
-  );
+    );
+  } else {
+    return (
+      <div className="FinalPoem">
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.revealPoem} />
+        </div>
+      </div>  
+    );
+  }
 }
 
 FinalPoem.propTypes = {
diff --git a/src/components/Game.js b/src/components/Game.js
index f8ad6eba..a1fb178c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -26,11 +26,11 @@ const Game = () => {
     setPlayerNumber(playerNumber + 1);
   };
 
-  const lastSubmission = submissionList.pop();
+  const lastSubmission = submissionList[submissionList.length - 1];
 
   const revealPoem = () => {
     setIsSubmitted(true);
-  }
+  };
 
   return (
     <div className="Game">
@@ -44,11 +44,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission submission={lastSubmission}/>
+      {(!isSubmitted && submissionList.length > 0) ? <RecentSubmission submission={lastSubmission}/> : ''}
 
-      <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} />
+      {(!isSubmitted) ? <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} /> : ''}
 
-      <FinalPoem isSubmitted={isSubmitted} submission={submissionList} revealPoem={revealPoem} />
+      <FinalPoem isSubmitted={isSubmitted} submissions={submissionList} revealPoem={revealPoem} />
 
     </div>
   );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index a602f594..c985c420 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -51,16 +51,16 @@ const PlayerSubmissionForm = (props) => {
 
   const generateFormFields = props.fields.map(field => {
     if (field.key) {
-      return <input 
+      return (<input 
               key={field.key}
               className={formFields[field.key] === '' ? '.PlayerSubmissionFormt__input--invalid' : ''}
               name={field.key}
               value={formFields[field.key] || ''}
               onChange={onInputChange}
               placeholder={field.placeholder}
-              type="text" />
+              type="text" />);
     } else {
-      return field
+      return field;
     }
   });
   

From 001909359b0d1d0764cccebc21b93ffcc6d6d533 Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Thu, 7 Jan 2021 23:21:11 -0800
Subject: [PATCH 5/9] Return null instead of empty string when final poem is
 submitted

---
 src/components/Game.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index a1fb178c..a51dc12a 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -44,9 +44,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      {(!isSubmitted && submissionList.length > 0) ? <RecentSubmission submission={lastSubmission}/> : ''}
+      {(!isSubmitted && submissionList.length > 0) ? <RecentSubmission submission={lastSubmission}/> : null}
 
-      {(!isSubmitted) ? <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} /> : ''}
+      {(!isSubmitted) ? <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} /> : null}
 
       <FinalPoem isSubmitted={isSubmitted} submissions={submissionList} revealPoem={revealPoem} />
 

From 788ec4c2209ada6cb45f48b0ee2a9cd7dd268d4c Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Thu, 7 Jan 2021 23:40:25 -0800
Subject: [PATCH 6/9] Fix className of input field

---
 src/components/PlayerSubmissionForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index c985c420..b8070846 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -53,7 +53,7 @@ const PlayerSubmissionForm = (props) => {
     if (field.key) {
       return (<input 
               key={field.key}
-              className={formFields[field.key] === '' ? '.PlayerSubmissionFormt__input--invalid' : ''}
+              className={formFields[field.key] === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
               name={field.key}
               value={formFields[field.key] || ''}
               onChange={onInputChange}

From 1fac620b91f1ee71ac1d55327a6605ab81b0417c Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Thu, 7 Jan 2021 23:54:02 -0800
Subject: [PATCH 7/9] Change format of return statement

---
 src/components/PlayerSubmissionForm.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index b8070846..dacdb6f8 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -51,14 +51,16 @@ const PlayerSubmissionForm = (props) => {
 
   const generateFormFields = props.fields.map(field => {
     if (field.key) {
-      return (<input 
-              key={field.key}
-              className={formFields[field.key] === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
-              name={field.key}
-              value={formFields[field.key] || ''}
-              onChange={onInputChange}
-              placeholder={field.placeholder}
-              type="text" />);
+      return (
+        <input 
+          key={field.key}
+          className={formFields[field.key] === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+          name={field.key}
+          value={formFields[field.key] || ''}
+          onChange={onInputChange}
+          placeholder={field.placeholder}
+          type="text" />
+      );
     } else {
       return field;
     }

From c976a0db1e838eecc48ed550104dcb088361b6d8 Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Fri, 8 Jan 2021 00:07:42 -0800
Subject: [PATCH 8/9] Fix spacing

---
 src/components/PlayerSubmissionForm.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index dacdb6f8..1d4bc537 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -70,8 +70,7 @@ const PlayerSubmissionForm = (props) => {
     <div className="PlayerSubmissionForm">
       <h3>Player Submission Form for Player #{ props.index }</h3>
 
-      <form className="PlayerSubmissionForm__form"
-            onSubmit={onFormSubmit} >
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit} >
 
         <div className="PlayerSubmissionForm__poem-inputs">
           {generateFormFields}

From 927a280f1a5ffd1a2e5a55b47d589d626cf5cf6f Mon Sep 17 00:00:00 2001
From: beauttie <bak02013@pomona.edu>
Date: Mon, 18 Jan 2021 17:17:52 -0800
Subject: [PATCH 9/9] Change null to empty string in ternary

---
 src/components/Game.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index a51dc12a..a1fb178c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -44,9 +44,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      {(!isSubmitted && submissionList.length > 0) ? <RecentSubmission submission={lastSubmission}/> : null}
+      {(!isSubmitted && submissionList.length > 0) ? <RecentSubmission submission={lastSubmission}/> : ''}
 
-      {(!isSubmitted) ? <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} /> : null}
+      {(!isSubmitted) ? <PlayerSubmissionForm index={playerNumber} sendSubmission={addPlayerSubmission} fields={FIELDS} /> : ''}
 
       <FinalPoem isSubmitted={isSubmitted} submissions={submissionList} revealPoem={revealPoem} />