0

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;



1
  • esto; value.target.innerHTML suena raro.. porque ese value no va a una variable de react? y luego, secret no es reactivo?
    – gbianchi
    Commented el 29 ene. 2023 a las 15:03

1 respuesta 1

0

Hay varios puntos que destacar:

  • Estas usando el useState para manejar el estado de tu secret, pero estoy observando que en tu useEffect lo estas tratando como string a tu secret y luego en tu método handleClick lo manejas como array. Eso puede dar un poco de confusión a otros developer o incluso a ti mismo. Así que es mejor decidirte si lo haces con string o con array, y mucho mejor si lo inicializas en tu useState con: useState([]) o useState('').

  • El método setState (o en tu caso setSecret) no es recomendable utilizarlo en un loop o bucle, ya que el setState no siempre te actualiza el valor inmediatamente, ya que React lo puede retrasar esta actualización para poder renderizar varios componentes en un solo paso (más información lo puedes encontrar aquí).

  • En mi caso lo he manejado con array el secret y en la parte para mostrar el secret he utilizado un div con la clase "d-flex" de bootstrap.

     const letters = Array(26).fill();
     const numsLetters = [];
    
     let secretLetters = [];
    
     const [secret, setSecret] = useState([]);
     letters.map((e, i) => {
       numsLetters.push(String.fromCharCode([i + 97]));
     });
    
    
     const word = 'rotulador';
     useEffect(() => {
       secretLetters = [];
       for (let i=0; i < word.length; ++i) {
         secretLetters.push('_');
       }
    
       setSecret(secretLetters);
     }, []);
    
     const handleClick = (({ target }) => {
       let count = 0;
       let copy = [...secret];
    
       for (let letter of word) {
         if (target.innerHTML === letter) {
           copy[count] = letter;
         }
         count++;
       }
    
       setSecret([...copy]);
    });
    
    return (
      <main>
        <div className='d-flex'>
         {
           secret.map((letter, i) => (
             <h2 key={ i }>{ letter } &nbsp;</h2>
           ))
         }
        </div>
        <section className='container-letters'>
          {
            numsLetters.map((e, i) => (
              <h1 onClick={ handleClick } key={ Math.random() } className='letters'>{e}</h1>
            ))
          }
        </section>
      </main>
    );
    
1
  • Púes me ayudaste mucho, no solo a resolver el problema, si no a enterderlo, basicamente es lo que dices en el segundo punto, muchas gracias por ayudarme. Commented el 30 ene. 2023 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.