In below code I am getting undefined value when user click on copy to clipboard button. It means Iam getting undefined value for`el.value`. I saw the the response in developer tool it is showing expected response over there.

**index.ts**

```
app.get("/getUrl",async(req,res)=>{

  res.send("http://s3.backetname.aws/"+req.query.fileName)
}
)

```

**ClipBoard.jsx**

```
import React from "react";

//Material UI Modules
import IconButton from "@material-ui/core/IconButton";
import Tooltip from '@material-ui/core/Tooltip';
import LinkIcon from '@material-ui/icons/Link';
//Custom Modules
import PopUpMessageSnackbar from "./PopUpMessageSnackbar";

export default function CopyToClipboard(props) {
    const [openNewUpdate, setOpenNewUpdate] = React.useState(false);

    const copyLinkToClipboard = () => {

        const el = document.createElement('textarea');

        el.value = props.getBuildAwsUrl(props.fileName)                  (*)

        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }

    const hidePopUpMessageSnackbar = () => {

        setOpenNewUpdate(false);
    }
    return (
        <div>
            <Tooltip title="Copy Link">

                <IconButton
                    aria-label="Copy"
                    onClick={() => {
                        gtag('event', 'copylinkclicked', {
                            'event_category': 'linkclicked'
                          });
                        copyLinkToClipboard()
                    }}
                >
                    <LinkIcon />
                </IconButton>
            </Tooltip>

            <PopUpMessageSnackbar
                show={openNewUpdate}
                message="Link Copied"
                hideNewUpdate={() => hidePopUpMessageSnackbar()} />
        </div>
    )
}
        .....
}

```

**Home.jsx**

```
getBuildAwsUrl(fileName){
        fetch(
           "http://localhost:8000/getUrl?fileName="+fileName
        )
        .then(res => res.text()) (**)
        .then(text => {
            return text
        });

<CopyToClipboard

          fileName = {props.data.fileName}         
          getBuildAwsUrl={(fileName)=>this.getBuildAwsUrl(fileName)}
        />

```

When I debug the code ,Once completion execution of fetch function control go back to the clipBoard (\*) line and assign the `undefined` value .Then again come back to Home.jsx (\*\*) line.I think this is the problem

If I do like this(below code) ,if I return value directly it is working fine, and `el.value` assigned with expected value.here I replaced `fetch()` with `return`

```
getBuildAwsUrl(fileName){
        return "http://s3.backetname.aws/"+fileName
}

```

But I do not want like this ,it should fetch from the `http://localhost:8000/getUrl?fileName=value`

Please help me ...Thanks in advance