Tengo varios divs que son dinámicos (depende del filtro que marcó el visitante). Entonces no puedo usar getElementById .
Necesito que el div principal cambie su CSS si se marca una entrada.
Aquí está mi código:
{workout?.map(x => { return <div className='relative bg-gray-200 p-4 rounded-md my-3 mx-2' key={x.name}> <input onClick={handleChecked} className='absolute right-0 top-0' type="checkbox" /> <div className='flex'> <img className='w-2/6 rounded mr-5' src={`${x.path}`} alt={x.name} /> <div className='w-4/6'> <h2 className='text-xl'>{x.name}</h2> <p>Nombre de séries : {x.set}</p> <p>Nombre de rép : {x.reps}</p> {x.secondary ? <p>Muscles solicités : <br /> <span className='space-x-2'> {x?.secondary?.map(k => { return <span className='bg-white px-1 rounded-md' key={k}>{k}</span> })} </span> </p> : null} </div> </div> </div> })} La idea es agregar una clase border-2 border-teal-500 al div principal de la input cuando está marcada.
Aquí está mi handleChecked:
function handleChecked(e) { // code here }Vi que tenía que usar parentNode pero el problema es que no puedo almacenar en una variable la entrada actual porque es dinámica. Cada elemento tiene su propia entrada.
¿Alguna idea de cómo puedo manejar esto?
De todos modos, no debería usar getElementById (o cualquier otro método JS DOM de Vanilla) en React; en su lugar, almacene y cambie los valores en el estado. Puede aprovechar esto haciendo que input sea un componente controlado y almacenando los valores verificados en una matriz o en el workout ; luego, al devolver el JSX, solo necesita verificar si la variable x (el elemento que se repite) indica que el la entrada actual debe verificarse o no, lo que también le indicará si el padre debe tener una clase diferente.
const makeHandleChecked = (i) => (e) = { setWorkout( workout.map( (w, j) => j !== i ? w : { ...w, checked: e.target.checked } ) ); }; {workout?.map((x, i) => ( <div className={`relative bg-gray-200 p-4 rounded-md my-3 mx-2${x.checked ? ' checked' : ''}`} key={x.name}> <input onClick={makeHandleChecked(i)} checked={x.checked} className='absolute right-0 top-0' type="checkbox" />