0

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?

introducir la descripción de la imagen aquí

<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)
  }
6
  • 1
    Has probado e.target.src? Todo manejador de evento onClick, onBlur, onKeyPress etc. siempre recibe el evento como argumento. La propiedad target de dicho evento es el elemento que disparó el evento. También podrías usar currentTarget para mayor precisión. Este objeto contiene los atributos que están establecidos en el mismo, como src si se trata de un elemento <img>. Saludos Commented el 8 nov. 2022 a las 17:06
  • Pero tengo el disparador lo tiene un botón que está pegado al IMG, usar target afecta al IMG?
    – FranyxD
    Commented el 8 nov. 2022 a las 18:13
  • Le podrías poner un id a tu imagen, o podrías navegar por el DOM, accedes al padre del botón y luego accedes a la imagen, que será un sibbling 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. Saludos Commented el 8 nov. 2022 a las 18:24
  • Qué es lo que deseas guardar en setImg la url o el objeto como tal? solo necesitas el src en tu función?
    – Sr1871
    Commented el 8 nov. 2022 a las 18:24
  • En IMG quiero guardar la URL de la imagen que está con el botón
    – FranyxD
    Commented el 8 nov. 2022 a las 20:23

1 respuesta 1

0

Pasandole el id del array ya pude comparar los ID luego para identificar la foto

<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 id={item.id} 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>

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.