1

I'm trying to pass a function to another component in order to call it up there after a button is clicked. When I run the code below I get an error.

 const [downloadUrls, setDownloadUrls] = useState<string[]>([]);
 const [preview, setPreview] = useState<string[]>([]);

 let promises: any[] = [];

 const uploadingToFB = async () => {

 setLoading(true);
 try {
  for (let i = 0; i < preview.length; i++) {
    const productRef = ref(storage, `images/${uuidv4()}.jpg`);

    promises.push(
      new Promise(async (resolve, reject) => {
        try {
          uploadString(productRef, preview[i], "data_url").then(
            (snapshot) => {
              getDownloadURL(snapshot.ref).then(async (url) => {
                resolve(url);
              });
            }
          );
        } catch (error) {
          reject(error);
        }
      })
    );
  }

  await Promise.all(promises).then((values) => {
    setDownloadUrls(values);
    setLoading(false);
  });
 } catch (error) {
  console.log(error);
 }

}

  <ButtonSaveProduct uploadingToFB={uploadingToFB}></ButtonSaveProduct>

ButtonSaveProduct Component:

 import React from "react";

 type PAGEPROPS = {
  uploadingToFB: () => Promise<void>;
 };


 export default function ButtonSaveProduct({ uploadingToFB }: PAGEPROPS) {
 return (
  <button
  className="p-4 bg-blue-950 text-white rounded-md hover:bg-blue-200"
  onClick={uploadingToFB}>
  save
  </button>
 );
}

Type 'OmitWithTag<PAGEPROPS, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'. Property 'uploadingToFB' is incompatible with index signature. Type '() => void' is not assignable to type 'never'.

On Vercel i got:

Type error: Page "app/ButtonSaveProduct/page.tsx" has an invalid "default" export: Type "{ uploadingToFB: () => void; }" is not valid

Captai-N
  • 1,124
  • 3
  • 15
  • 26
  • does nobody have an idea? – Captai-N May 23 '23 at 12:13
  • Firstly your uploadingToFB does not return void, it is an async function so the return type is Promise. Secondly the onClick should be calling the function rather than the result of the function so `onClick={uploadingToFb}`. Try that and let us know – Jorge Guerreiro May 23 '23 at 12:46
  • Hey, no i got Property 'uploadingToFB' is incompatible with index signature. Type '() => Promise' is not assignable to type 'never'. – Captai-N May 23 '23 at 12:51
  • Where is `promises` defined? What is `uploadString`? What is `ref`? What is `PageProps`? Because you've defined a type `PAGEPROPS` but your error message mentions a `PageProps` which you don't show. Why are you using a [well-known antipattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) all over the place? Your try/catch won't work because of the way you've nested the Promises. I realize that isn't what you're asking about here but it's going to be hard to figure out the actual problem without the needed info/fixes. – Jared Smith May 23 '23 at 13:15
  • @Jared Smith i have edit my orginal post- uploadString, ref are Firebase functions. – Captai-N May 23 '23 at 13:16
  • You can't have mutable state like that in a functional component. And you don't need it AFAICT. We aren't going to be able to help you with this, you need to fix the problems in the code I mentioned earlier and add all the relevant data. – Jared Smith May 23 '23 at 13:19

0 Answers0