usando una api (unsplash) tengo muchas fotos cargadas en la store de redux, y haciendo un map cargo todas con su respectivo button, como conseguiria pasar como parametro a la funcion onCLick del button el src?
<section className="w-full gap-0 sm:columns-2 md:columns-3 xl:columns-4 2xl:columns-5 3xl:columns-6">
{galery.map((item, index) => {
return (
<figure key={index} className='relative'>
<button onClick={() => saveToFavorites(imag.src)} className='absolute left-5 top-3 bg-gray shadow-md'>Guardar</button>
<img
className="object-cover p-2"
src={item.urls.regular}
onClick={openModal}
alt={item.alt_description}
/>
</figure>
);
})}
</section>
Esta en la funcion que quiero que envie el src pero no consigo hacer algo asi sencillito
const galery = useSelector((state) => state.search);
const dispatch = useDispatch();
const [imag, setImg] = useState("");
function saveToFavorites(e) {
setImg(e.target);
dispatch(actionAddFavorite(imag.src))
console.log(imag.src)
}
e.target.src
? Todo manejador de eventoonClick
,onBlur
,onKeyPress
etc. siempre recibe el evento como argumento. La propiedadtarget
de dicho evento es el elemento que disparó el evento. También podrías usarcurrentTarget
para mayor precisión. Este objeto contiene los atributos que están establecidos en el mismo, comosrc
si se trata de un elemento<img>
. Saludosid
a tu imagen, o podrías navegar por el DOM, accedes al padre del botón y luego accedes a la imagen, que será unsibbling
del botón. Formas hay muchas, pero lo que no puedes hacer es pasarle un argumento al manejador del evento, porque la firma de los manejadores de evento establecen que sólo reciben como argumento el evento. SaludossetImg
la url o el objeto como tal? solo necesitas el src en tu función?