Estoy teniendo tiempos difíciles con este.

Creé un modal (SetLevel) para que el usuario pueda seleccionar un nivel y después de eso, lo que quiero es simplemente actualizar mi estado inicial, que se conoce con el nombre de nivel. Así que paso mi prop en handleChange en el componente SetLevel de esta manera:

 const Game = () => { const [levelOpen,setlevelOpen]=useState(false); const [level,setlevel]=useState(1); const changedLevel = (newLevel)=>{ console.log('newLevel',newLevel); setlevel(newLevel); } return ( <div> <h1 className='title'>Find the icons </h1> <div className='container'> <button className='btn' onClick={() => setlevelOpen(true)}> Select level </button> <SetLevel isOpen={levelOpen} handleChange={()=>changedLevel(level)} onClose={()=>setlevelOpen(false)}/> </div> <ItemDrag newLevel={level}/> </div> ); };

El componente secundario SetLevel se ve así:

 const SetLevel = ({isOpen,onClose,handleChange}) => { if (isOpen === false) return null; const close = (e) => { e.preventDefault(); if (onClose) { onClose(); } }; const handleClick =(num,e)=>{ console.log(num); handleChange(num) close(e) } return ( <div className='modal-window'> <div> <div onClick={(e) => close(e)} className='modal-close'> CLOSE </div> <h1>Select level!</h1> <button className="btn" onClick={(e)=>handleClick(3,e)} >LEVEL3</button> </div> </div> ); }

Entonces, así es como lo hago si un usuario selecciona el nivel 3. Paso ese número a mi función handleClick y esta función debería encargarse de ese accesorio handleChange como puede ver.

Pero cada vez que hago esto, mi nivel no se actualiza, ¿por qué? El valor que recibo siempre es 1, ¿por qué? Gracias.