Getting undefined value for react component | Node js | React

user_14031645 0
Viewed 102

In below code I am getting undefined value when user click on copy to clipboard button. It means Iam getting undefined value forel.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

reactjs express node.js api javascript
2 Answers

Where is props defined? I don't see any place where props is defined. I don't know if this would fix the problem, but try this.

const copyLinkToClipboard = (props) => {
        
        const el = document.createElement('textarea');
   
        el.value = props.getBuildAwsUrl(props.fileName) (*) here I am getting undefined value
        .....
}```
user_87056260

I got the solution. By making method as async method. But I do not know following method is best one or not.

Home.jsx

 const getBuildAwsUrl=async(fileName)=>{

   let promise= await fetch("http://localhost:8000/getUrl?fileName="+fileName).then(response=>response.text())
   return promise;
   
  }

Clipboard.jsx

 const copyLinkToClipboard = async() => {
        
        const el = document.createElement('textarea');
        
        el.value = await props.getBuildAwsUrl(props.fileName)                  (*)
        
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }
user_140316450
Related