From ae762cb6142261e414b6f87426e75c1ac9277f89 Mon Sep 17 00:00:00 2001
From: Samir <68955143+SamirMishra27@users.noreply.github.com>
Date: Wed, 25 Oct 2023 08:54:47 +0530
Subject: [PATCH] fix: wordle tiles rendering on every user interaction (#1356)

This commit fixes an issue with Wordle Game Play where if you interact
with the game in any form, all the wordle tiles and the app would
forcefully re-render.

Issue was identified with assigning a unique key to Wordle tiles. Now it
assigns stable keys so it does not break and react is able to recognise it.
(unique key identifier)

References issue #1353.

Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>
---
 src/plays/wordle/Wordle.tsx               | 12 ++++++------
 src/plays/wordle/components/WordleRow.tsx | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/plays/wordle/Wordle.tsx b/src/plays/wordle/Wordle.tsx
index db7311abc..333480541 100644
--- a/src/plays/wordle/Wordle.tsx
+++ b/src/plays/wordle/Wordle.tsx
@@ -242,12 +242,12 @@ function Wordle(props: any): JSX.Element {
               {allTimeStats && <EndScreen allTimeStats={allTimeStats} reset={reset} />}
 
               <div className="wordle w-[21rem] lg:w-[20rem] h-[24rem] flex flex-col items-center justify-evenly">
-                <WordleRow tileRow={tiles[0]} wordleWord={wordleWord} />
-                <WordleRow tileRow={tiles[1]} wordleWord={wordleWord} />
-                <WordleRow tileRow={tiles[2]} wordleWord={wordleWord} />
-                <WordleRow tileRow={tiles[3]} wordleWord={wordleWord} />
-                <WordleRow tileRow={tiles[4]} wordleWord={wordleWord} />
-                <WordleRow tileRow={tiles[5]} wordleWord={wordleWord} />
+                <WordleRow rowNo={0} tileRow={tiles[0]} wordleWord={wordleWord} />
+                <WordleRow rowNo={1} tileRow={tiles[1]} wordleWord={wordleWord} />
+                <WordleRow rowNo={2} tileRow={tiles[2]} wordleWord={wordleWord} />
+                <WordleRow rowNo={3} tileRow={tiles[3]} wordleWord={wordleWord} />
+                <WordleRow rowNo={4} tileRow={tiles[4]} wordleWord={wordleWord} />
+                <WordleRow rowNo={5} tileRow={tiles[5]} wordleWord={wordleWord} />
               </div>
 
               <div className="keyboard w-[22rem] lg:w-[30rem] h-44 lg:h-[13rem] flex flex-col items-center justify-evenly">
diff --git a/src/plays/wordle/components/WordleRow.tsx b/src/plays/wordle/components/WordleRow.tsx
index 3273c0cfb..c44385b7a 100644
--- a/src/plays/wordle/components/WordleRow.tsx
+++ b/src/plays/wordle/components/WordleRow.tsx
@@ -4,8 +4,8 @@ import { useEffect, useState } from 'react';
 import WordleTile from './WordleTile';
 import { TileRow, TileColor } from '../types';
 
-export default function WordleRow(props: { tileRow: TileRow; wordleWord: string }) {
-  const { tileRow, wordleWord } = props;
+export default function WordleRow(props: { rowNo: number; tileRow: TileRow; wordleWord: string }) {
+  const { rowNo, tileRow, wordleWord } = props;
   const [isCorrect, setCorrect] = useState(false);
 
   useEffect(() => {
@@ -26,7 +26,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
                   roll
                   correct={isCorrect}
                   index={index}
-                  key={crypto.randomUUID()}
+                  key={`tile-${rowNo}-${index}`}
                   style={TileColor.CORRECT}
                   tile={letter}
                 />
@@ -40,7 +40,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
                   roll
                   correct={isCorrect}
                   index={index}
-                  key={crypto.randomUUID()}
+                  key={`tile-${rowNo}-${index}`}
                   style={TileColor.MISPLACED}
                   tile={letter}
                 />
@@ -51,7 +51,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
                   roll
                   correct={isCorrect}
                   index={index}
-                  key={crypto.randomUUID()}
+                  key={`tile-${rowNo}-${index}`}
                   style={TileColor.WRONG}
                   tile={letter}
                 />
@@ -63,7 +63,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
               <WordleTile
                 correct={isCorrect}
                 index={index}
-                key={crypto.randomUUID()}
+                key={`tile-${rowNo}-${index}`}
                 roll={false}
                 style={TileColor.MISPLACED}
                 tile={letter}