tengo el problema de que tengo una función de map que esta mostrando todos los elementos como se ve en el codigo 1, el cual quiero que si le de click en un elemento quiero que el div tenga la propiedad pointerEvents: none
, tenia la idea de hacerlo en las props del componente <Square>
como se puede ver en el codigo 2, el problema es que al dar click a un se pone automaticamente en todos la propiedad pointerEvents: none
.
Espero haberme explicado bien.
Codigo 1:
return (
<main className='board'>
<h1>Juego Memorice</h1>
<section className='game'>
{board.map((square, index) => {
return (
<Square
key={index}
index={index}
updateBoard={updateBoard}
>
{square}
</Square>
)
})}
</section>
</main>
)
Codigo 2:
return (
<main className='board'>
<h1>Juego Memorice</h1>
<section className='game'>
{board.map((square, index) => {
return (
<Square
key={index}
isActive={isActive}
index={index}
updateBoard={updateBoard}
>
{square}
</Square>
)
})}
</section>
</main>
)
Componente <Square>
:
export const Square = ({ children, isActive, updateBoard, index }) => {
const handClick = () => {
updateBoard(index)
}
return (
<div
onClick={handClick}
className='squeare'
style={{ pointerEvents: isActive ? 'none' : '' }}
>
{children}
</div>
)
}
Funcion App:
function App() {
const [board, setBoard] = useState(() => {
const ArrayPhotos = []
for (let i = 0; i < 16; i = i + 1) {
ArrayPhotos[i] = <Image src={Block[0]} />
}
return ArrayPhotos
})
const updateBoard = (index) => {
setIsActive(current => !current)
const newBoard = [...board]
newBoard[index] = <Image src={RandomImagen[index]} />
setBoard(newBoard)
}
}