Estoy construyendo una aplicación de tres en raya. No he agregado funcionalidad entre las X y las O, en este momento, estoy atascado en generar UNA imagen a través de onClick. Configuré el estado para hacer onClick, al menos eso creo, y escribí mi condicional, pero está representando X imágenes para cada cuadrado. ¿Cómo renderizo una imagen para UN solo cuadrado en lugar de todos? Aquí está mi código:

Xs.js

 import React from 'react' import styled from 'styled-components' import X1 from './images/X1.jpg' import X2 from './images/X2.jpg' import X3 from './images/X3.jpg' const Image = styled.img` width: 175px; height: 175px; ` const Xs = () => { const X = [X1, X2, X3] const randomXImg = Math.floor(Math.random() * X.length) return ( <Image src={X[randomXImg]} /> ) } export default Xs

Cell.js: esto es solo un div para mostrar el cuadrado real

 import React from 'react' import styled from 'styled-components' const CellBlock = styled.div` display: flex; align-items: center; justify-content; border: 1px solid white; width: 200px; height: 200px; background-color: white; ` const Container = styled.div` display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center; box-sizing: border-box; ` const Board = styled.div` display: grid; grid-template-columns: 210px 210px 202px; grid-template-rows: 210px 210px 202px; background-color: darkgreen; ` const Cell = ({ onClick, isTurn, children }) => { let squares = [] squares = Array.from(Array(9).fill('')) return ( <Container> <Board> { squares.map((box, id) => ( <CellBlock key={id} id={id} onClick={onClick} isTurn={isTurn} > {children} </CellBlock> )) } </Board> </Container> ) } export default Cell

Aquí está el tablero de juego, que es el componente principal de Xs.js y Cell.js Gameboard.js

 import React, { useState } from 'react' import Cell from './Cell' import Xs from './Xs' const Gameboard = () => { const [ player, setPlayer ] = useState('X') const [ isNotOccupied, setIsNotOccupied ] = useState(false) return ( <> <Cell onClick={() => setIsNotOccupied(!isNotOccupied)} isTurn={player} > { isNotOccupied && player === 'X' && <Xs />} </Cell> </> ) } export default Gameboard

Cualquier ayuda sería muy apreciada.