Comment créer des clés uniques dans un tableau 2D d'un damier à l'aide de React et JavaScript

Question

Je suis nouveau dans la création d'applications et le codage, et en tant que projet parallèle, j'essaie de créer un échiquier en utilisant React et JavaScript. J'essaie actuellement de trouver un moyen de créer une clé d'identification unique dans la boucle for 2D du composant Chessboard ci-dessous :

Voici le code du composant Tile

import './Tile.css';

const WhiteTile = () =>
{
   return(
      <div className='TileWhite'></div>
   )
}

const AquaTile = () =>
{
   return(
      <div className='TileAqua'></div>
   )
}


const ENUM_OBJECT = 
{
   whiteTile: <WhiteTile/>,
   aquaTile: <AquaTile/>,
};

function Tile({tileType}) 
{
   return ENUM_OBJECT[tileType]
}

export default Tile;

Voici le code du composant échiquier

import React from 'react';  
import '../ChessBoard/Chessboard.css'
import Tile from './Tile';



function ChessBoard()
{  
    const xCoordinates = ["a", "b", "c", "d", "e", "f", "g", "h", "0"];


    const yCoordinates = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
    
    const coordinatesBoard = []; 

    const RenderCoordinates = () =>
    {

        for(let y = yCoordinates.length; y > 0; y--)
        {
            for(let x = 0; x < xCoordinates.length - 1; x++)
            {   
                if(x % 2 === 0)
                {
                    coordinatesBoard.push(<Tile tileType={"whiteTile"} key={''}></Tile>);
                }
                else
                {
                    coordinatesBoard.push(<Tile tileType={"aquaTile"} key={''}></Tile>);

                }
            }
        }
        return coordinatesBoard; 
    }


    return(<div className="App">
            {<RenderCoordinates/>}
            </div>)
    
}

export default ChessBoard;

J'ai déjà essayé d'utiliser la fonction carte

const RenderTiles = () =>
    {
        const cBoard = coordinatesBoard.map((xyCoordinates, index) =>
        {
                if(index % 2)
                {
                    return(
                    <div className ="Tile1" key={index}>
                        {xyCoordinates}
                    </div>
                    )
                }
                else 
                {
                    return(
                    <div className ="Tile2" key={index}>
                        {xyCoordinates}
                    </div>
                    )
                }
        });

        return cBoard
    }

A également étudié useState

const [counter, setCounter] = useState(0);

    const increment = () => 
    {
    
        setCounter(counter + 1);
    }

J'ai essayé d'insérer un compteur ici mais je suis tombé sur une boucle infinie (à partir de la fonction échiquier)

coordinatesBoard.push(<Tile tileType={"whiteTile"} key={counter + 1}></Tile>);

Je m'attendais à ce que le compteur incrémente chaque fois qu'une tuile est poussée sur le plateau s'il vous plaît, aidez-moi.

Answer 1

Vous pouvez utiliser un générateur de chaînes aléatoires de base (pas toujours garanti d'être unique, mais c'est très aléatoire)

function randomString() {
  const possibleChars = 'abcxyz123'
  const length = 10

  const randString = []

  for (let i = 0; i <= length; i++) {
    const randomChar = possibleChars[Math.floor(Math.random() * possibleChars.length)]
    randString.push(randomChar)
  }
  
  return randString.join('')
}

console.log(randomString()) // "3zb1baxbbyy"