React wait for useEffect to finish before return

November 30, 2021

I feel bad for asking this kind of question but I have tried everything I could have done and I’m a bit lost with zero experience in React.
Here is the snippet:

export function FileUpload({
  file,
  url,
  onDelete,
  onUpload,
}: FileUploadProps) {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    async function upload() {
      url = await uploadFile(file, setProgress);
      console.log(url) //I need get this value on return
      onUpload(file, url);
    }
    upload();
  }, []);
  console.log(url) //empty string here
  return (
    <Grid item>
      <FileHeader file={file} url={url} onDelete={onDelete} />
      <LinearProgress variant="determinate" value={progress} />
    </Grid>
  );
}

The issue is I got url value empty before the return

>Solution :

I believe you’re not using the url prop from the props, so lemme remove it and add url to state instead.

export function FileUpload({
  file,
  onDelete,
  onUpload,
}: FileUploadProps) {
  const [progress, setProgress] = useState(0);
  const [url, setUrl] = useState('');
  useEffect(() => {
    async function upload() {
      url = await uploadFile(file, setProgress);
      setUrl(url) // this will set the state variable
      onUpload(file, url);
    }
    upload();
  }, []);
  if (!url) { // checking for empty url here.
    return null;
  }

  return ( // This only gets returned when url is not empty
    <Grid item>
      <FileHeader file={file} url={url} onDelete={onDelete} />
      <LinearProgress variant="determinate" value={progress} />
    </Grid>
  );
}