So erstellen Sie mit React und JavaScript eindeutige Schlüssel in einem 2D-Array eines Schachbretts-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich bin neu im Erstellen von Apps und im Codieren und versuche als Nebenprojekt, ein Schachbrett mit React und JavaScript zu erstellen. Ich versuche derzeit, einen Weg zu finden, einen eindeutigen ID-Schlüssel in der 2D-for-Schleife der Schachbrettkomponente unten zu erstellen:

Dies ist der Code für die Tile-Komponente

import './Tile.css'; const WhiteTile = () => { return( 
 ) } const AquaTile = () => { return( 
 ) } const ENUM_OBJECT = { whiteTile: , aquaTile: , }; function Tile({tileType}) { return ENUM_OBJECT[tileType] } export default Tile;

Dies ist der Code für die Schachbrettkomponente

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(); } else { coordinatesBoard.push(); } } } return coordinatesBoard; } return( {} 
) } export default ChessBoard;

Ich habe schon einmal versucht, die Kartenfunktion zu nutzen

const RenderTiles = () => { const cBoard = coordinatesBoard.map((xyCoordinates, index) => { if(index % 2) { return(  {xyCoordinates} 
 ) } else { return(  {xyCoordinates} 
 ) } }); return cBoard }

Auch useState studiert

const [counter, setCounter] = useState(0); const increment = () => { setCounter(counter + 1); }

Ich habe versucht, hier einen Zähler einzufügen, bin aber auf eine Endlosschleife gestoßen (aus der Schachbrettfunktion)

coordinatesBoard.push();

Ich habe erwartet, dass sich der Zähler jedes Mal erhöht, wenn ein Plättchen auf das Brett geschoben wird Bitte helfen Sie.

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"