Modified pre round to use useRef hook

client/src/components/pre-round.component.jsx

@@ -1,35 +1,30 @@
-import React from "react";
+import React, { useRef } from "react";
 
-class PreRound extends React.Component {
-  constructor(props) {
-    super(props);
-    this.textareaRef = React.createRef();
-  }
-
-  copyGameId() {
-    const { current } = this.textareaRef;
-    current.select();
+const PreRound = ({ gameId, playerName, onStart }) => {
+  const textareaRef = useRef(null);
+  const copyGameId = () => {
+    textareaRef.current.select();
     document.execCommand("copy");
-  }
-  
-  render() {
-    const { gameId, playerName, onStart } = this.props;
-    return (
-      <div>
-        <p>Playing as {playerName}</p>
-        <p>
-          Game Code: {gameId} <button onClick={() => this.copyGameId()}>Copy</button>
-        </p>
-        <button onClick={onStart}>Start Game</button>
-        <textarea
-          ref={this.textareaRef}
-          style={{ position: "absolute", top: "-1000px" }}
-          value={gameId}
-        />
-      </div>
-      );
-    }
-  }
-  
-  export default PreRound;
-  
+  };
+
+  return (
+    <div style={{
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+    }}>
+      <span>Playing as {playerName}</span>
+      <span onClick={copyGameId}>Game Code: {gameId} (click to copy)</span>
+      <button onClick={onStart}>Start Game</button>
+      <textarea
+        ref={textareaRef}
+        style={{ position: "absolute", top: "-1000px" }}
+        value={gameId}
+        readOnly
+      />
+    </div>
+  );
+}
+
+export default PreRound;