passing a function to map in react

Question

I'm trying to render a blog post from my database. but I need to call a download image function for every item.

I've tried to put it in the .map function but in getting errors I'm not to sure how to go about it I pass the function as a prop to the component

  async function downloadImage(path) {
    try {
      setIsOpen(true);
      const { data, error } = await supabase.storage
        .from("public/job-photo")
        .download(`jobphotos/${path}.jpg`);
      if (error) {
        throw error;
      }
      const url = URL.createObjectURL(data);
      setAvatarUrl(url);
    } catch (error) {
      console.log("Error downloading image: ", error.message);
    }
  }

comp

dataFetch.map((item) => (
            <div
              key={item.genid}
              className="flex flex-col rounded-lg shadow-lg overflow-hidden"
            

          {downloadImg(item.genid)}
          <div className="flex-shrink-0">
            <img className="h-48 w-full object-cover" src={img} alt="" />
          </div>
          <div className="flex-1 bg-white dark:bg-secondaryDark p-6 flex flex-col justify-between">
            <div className="flex-1">
              <p className="text-sm font-medium text-indigo-600 dark:text-white">
                {item.category}
              </p>

              <p className="text-xl font-semibold text-gray-900 dark:text-yellow-400">
                {item.jobname}
              </p>
              <p className="mt-3 text-base text-gray-500 dark:text-white">
                {item.jobdescription}
              </p>
            </div>
          </div>
        </div>
      ))}

One of the errors will be calling downloadImg not downloadImage. — Andy
– Andy, Commented Nov 13, 2021 at 15:44
hello the question doesn't show it but it was passed as a prop as downloadImg — KeoooDev
– KeoooDev, Commented Nov 13, 2021 at 15:48

CertainPerformance · Accepted Answer · 2021-11-13 16:13:42Z

2

You need another array state to store the downloaded images. Call downloadImg for all of the dataFetch items on mount, and only try to render the image after the same index in the images array isn't undefined. Something along the lines of:

// Better designed download function that resolves with the downloaded data:
function downloadImage(path) {
    return supabase.storage
        .from("public/job-photo")
        .download(`jobphotos/${path}.jpg`)
        .then(({ data, error }) => {
            if (error) throw error;
            return URL.createObjectURL(data);
        });
}

const [urls, setUrls] = useState(() => dataFetch.map(() => null));
// Fetch all URLS when the component mounts:
useEffect(() => {
  dataFetch.forEach((item, i) => {
    downloadImage(item.genid).then((url) => {
      setUrls(urls => urls.map((prev, j) => j === i ? url : prev);
    }); // .catch(handleError);
  });
}, []);

// Render them once they exist:
dataFetch.map((item, i) => (
    <div
        key={item.genid}
        className="flex flex-col rounded-lg shadow-lg overflow-hidden"
    >
        { urls[i] ? <img src={urls[i] /} : null }

edited Nov 13, 2021 at 16:13

answered Nov 13, 2021 at 15:42

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

KeoooDev Over a year ago

hello it seems to have some sort of error in this method It only renders 1 picture and sets the other to null

KeoooDev Over a year ago

added photo to post

CertainPerformance Over a year ago

Ops, change setUrls to a callback

KeoooDev Over a year ago

inside download img?

CertainPerformance Over a year ago

No, when you call setUrls - just like the code in my answer

Collectives™ on Stack Overflow

passing a function to map in react

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related