Return null from GameInfo and PlayerInfo if they have no populated props

These info objects get filled in with data that is streamed from the
server "/events" API. While the page is still loading, we don't want
to brifly see the skeleton of these objects drawn with no real data
inside them.

It's much cleaner to return null instead. This gives a clean result
where these sections of the page only appear when fully formed.

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index f1426ecff4f443c8837237fffd8caeef3f751153..a7614bcaf56168424da88827830cfbbea54be6c9 100644 (file)
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -72,6 +72,9 @@ events.addEventListener("game-state", event => {
  *********************************************************/
 
 function GameInfo(props) {
+  if (! props.id)
+    return null;
+
   return (
     <div className="game-info">
       <h2>{props.id}</h2>
@@ -81,6 +84,9 @@ function GameInfo(props) {
 }
 
 function PlayerInfo(props) {
+  if (! props.id)
+    return null;
+
   return (
     <div className="player-info">
       <h2>Player</h2>