Tengo números en mi lista y los estoy mostrando en la pizarra:
const numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, ]; {numbers.map(number, index) => ( <div className="bingo-grid__row" id={index+1} key={index}> <div className={className}> <div className="bingo-ball bingo-ball"> <div className="bingo-ball__text">{number}</div> </div> </div> </div> ) }Además de eso, estoy seleccionando un número aleatorio:
const [chosen, setChosen] = useState(null); const [selectedNumbers, setSelectedNumbers] = useState([]); const chooseNumber = () => { let r; do { r = Math.floor(Math.random() * 75) + 1; } while (selectedNumbers.indexOf(r) > -1) setChosen(r) setSelectedNumbers([...selectedNumbers, r]); };Y lo que intento hacer es agregar una clase si el número coincide con el número aleatorio. Entonces, por ejemplo, si el número aleatorio es 6, quiero agregar una nueva clase a bingo-grid__row. ¿Alguna sugerencia para esto?
Puede crear la clase dinámicamente agregando una condición como esta:
{numbers.map( (number, index) => ( <div className={`bingo-grid__row ${chosen === number ? yourClassToAdd : ""}`} id={index+1} key={index}> //rest of the logic ) } Actualización : si desea mantener las selecciones persistentes, puede cambiar la condición para usar el estado de los selectedNumbers que ya creó de esta manera:
{numbers.map( (number, index) => ( <div className={`bingo-grid__row ${selectedNumbers.includes(number) ? yourClassToAdd : ""}`} id={index+1} key={index}> //rest of the logic ) }const [chosen, setChosen] = useState(null); const [selectedNumbers, setSelectedNumbers] = useState([]); const chooseNumber = async () => { let r; let component = document.querySelector(".bingo-grid__row") do { r = await Math.floor(Math.random() * 75) + 1; if(r === 6){ componet.classList.add("newClass") } } while (selectedNumbers.indexOf(r) > -1) setChosen(r) setSelectedNumbers([...selectedNumbers, r]); };