3

Estoy usando React.js y quisiera utilizar Hooks para enviar los datos que obtengo de la petición con fetch. Quisiera enviarlos a un nuevo componente y mostrarlos en la vista al usuario, cuando hago click en el boton. Como podría enviar item.desktopImage.publicURL y item._id a otro componente y poder mostrarlos en la nueva vista? Y ese componente nuevo donde recibo los datos debería llamarlo en App (main) ?

import React, { useEffect, useState } from "react";
import CardDetail from "../cardDetail/CardDetail";
import "./style.css";

export default function Card() {
  const [quote, setQuote] = useState([]);
  const [error, setError] = useState(null);

  async function fetchData() {
    const res = await fetch(
      "https://api-url"
    );
    res
      .json()
      .then((res) => setQuote(res.quotes))
      .catch((err) => setError(err));
  }

  useEffect(() => {
    fetchData();
  }, []);

  if (error) {
    throw Error(error.message);
  } else {
    return (
      <ol className="grid-container">
        {quote.map((item) => (
          <div key={item._id}>
            <div>
              <img
                src={item.desktopImage.publicURL}
                alt="desktopImage"
                className="desktop-image"
              ></img>
            </div>
            <div>
              <img
                src={item.mobileImage.publicURL}
                alt="mobileImage"
                className="mobile-image"
              ></img>
            </div>
            <div>{item.activeTs}</div>
            <button onClick={} type="button">
              Send id
            </button>
          </div>
        ))}
        ,
      </ol>
    );
  }
}
4

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.