Cuando no hay letras repetidas funciona bien, se muestran todas las letras, pero si tenemos una palabra con letras repetidas solo me renderiza la letra que se encuentra en la última posición. Creo que tiene que ver con el renderizado de react, que no lo acabo de entender. Así que mas que una solución,(que tambien) si alguien me puede expliar el porqué del problema.
import React, { useState, useEffect } from 'react';
const App = () => {
const letters = Array(26).fill()
const numsLetters = []
const [secret, setSecret] = useState()
letters.map((e, i) => {
numsLetters.push(String.fromCharCode([i + 97]))
})
const word = "rotulador"
useEffect(() => {
setSecret(word.replace(/[^*]/g, "_ "))
}, [])
const handleClick = ((value) => {
let count = -1
for (let i of word) {
count++
if (value.target.innerHTML === i) {
const copy = [...secret]
setSecret(copy)
copy[count * 2] = i
console.log(count, i)
console.log(secret)
}
}
})
return (
<main>
{
secret && (
<h1>{secret}</h1>
)
}
<section className='container-letters'>
{
numsLetters.map((e, i) => (
<h1 onClick={(value) => handleClick(value)} key={i} className='letters'>{e}</h1>
))
}
</section>
</main>
);
}
export default App;