How to pass data from Child function to parent component in react

Question

I want url in parent component and want to save it in imageUrl state, url is in handleUploadImage function ( image download url is the url which I need in parent component)

myFunc.js

export const handleUploadImage = (image: any, folderName = "adhaar") =>{
    let file = image;
    const storage = firebase.storage();
    const storageRef = storage.ref();
    const uploadTask = storageRef.child(`${folderName}/` + file.name).put(file);
  
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) =>{
        storageRef.child(file.name).getDownloadURL().then(url => { 
            console.log(url)
        })        
      },(error) =>{
        throw error
      },() => {        
        uploadTask.snapshot.ref.getDownloadURL().then((url) =>{           
          console.log("image download url:", url)
        })  
     }
   ) 
  }

parent Component

const ParentComponent = ()=>
{
    const [imageUrl setImageUrl] =useState()

      const getUrl = ()=>
      {
        handleUploadImage(image)
          setImageUrl()
      }

return(
   <button onClick={getUrl}> Get Url </button>

)


}

With a bit of search : https://stackoverflow.com/a/35537718/3636091 — Seba99, Sep 21 '21 at 09:38

score 1 · Accepted Answer · edited Sep 21 '21 at 09:52

handleUploadImage function must be return a new url with Promise. Change function like this:

export const handleUploadImage = (image: any, folderName = 'adhaar') =>
  new Promise((resolve, reject) => {
    let file = image;
    const storage = firebase.storage();
    const storageRef = storage.ref();
    const uploadTask = storageRef.child(`${folderName}/` + file.name).put(file);

    uploadTask.on(
      firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        storageRef
          .child(file.name)
          .getDownloadURL()
          .then((url) => {
            console.log(url);
          });
      },
      (error) => {
        reject(error);
      },
      () => {
        uploadTask.snapshot.ref.getDownloadURL().then((url) => {
          console.log('image download url:', url);
          resolve(url); // this is important
        });
      }
    );
  });

Handle the new url and set react state

const ParentComponent = ()=>
{
    const [imageUrl, setImageUrl] =useState()

      const getUrl = ()=>
      {
        handleUploadImage(image).then((newUrl) => setImageUrl(newUrl))
          
      }

return(
   <button onClick={getUrl}> Get Url </button>

)


}

score 1 · Answer 2 · answered Sep 21 '21 at 10:08

just pass your setImage to the child and set it there, just like this:

    const ParentComponent = ()=>
{
    const [imageUrl, setImageUrl] =useState()

      const getUrl = ()=>
      {
        handleUploadImage(image, setImage)
          
      }

return(
   <button onClick={getUrl}> Get Url </button>

)


}
/////////////////////

    export const handleUploadImage = (image, setImage) =>
  new Promise((resolve, reject) => {
    let file = image;
    const storage = firebase.storage();
    const storageRef = storage.ref();
    const uploadTask = storageRef.child(`${folderName}/` + file.name).put(file);

    uploadTask.on(
      firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        storageRef
          .child(file.name)
          .getDownloadURL()
          .then((url) => {
            console.log(url);
// where you need your url
setImage(url)
          });
      },
      (error) => {
        reject(error);
      },
      () => {
        uploadTask.snapshot.ref.getDownloadURL().then((url) => {
          console.log('image download url:', url);
// or set image here 
setImage(url)
          resolve(url); // this is important
        });
      }
    );
  });

How to pass data from Child function to parent component in react

2 Answers2