title: Getting undefined value for react component | Node js | React
body: <p>In below code I am getting undefined value when user click on copy to clipboard button. It means Iam getting undefined value for<code>el.value</code>. I saw the the response in developer tool it is showing expected response over there.</p>
  <p><strong>index.ts</strong></p>
  <pre><code>app.get(&quot;/getUrl&quot;,async(req,res)=&gt;{
    
    res.send(&quot;http://s3.backetname.aws/&quot;+req.query.fileName)
  }
  )
  </code></pre>
  <p><strong>ClipBoard.jsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  //Material UI Modules
  import IconButton from &quot;@material-ui/core/IconButton&quot;;
  import Tooltip from '@material-ui/core/Tooltip';
  import LinkIcon from '@material-ui/icons/Link';
  //Custom Modules
  import PopUpMessageSnackbar from &quot;./PopUpMessageSnackbar&quot;;
  
  
  export default function CopyToClipboard(props) {
      const [openNewUpdate, setOpenNewUpdate] = React.useState(false);
      
  
      
  
      const copyLinkToClipboard = () =&gt; {
          
          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 = () =&gt; {
  
          setOpenNewUpdate(false);
      }
      return (
          &lt;div&gt;
              &lt;Tooltip title=&quot;Copy Link&quot;&gt;
  
                  &lt;IconButton
                      aria-label=&quot;Copy&quot;
                      onClick={() =&gt; {
                          gtag('event', 'copylinkclicked', {
                              'event_category': 'linkclicked'
                            });
                          copyLinkToClipboard()
                      }}
                  &gt;
                      &lt;LinkIcon /&gt;
                  &lt;/IconButton&gt;
              &lt;/Tooltip&gt;
  
              &lt;PopUpMessageSnackbar
                  show={openNewUpdate}
                  message=&quot;Link Copied&quot;
                  hideNewUpdate={() =&gt; hidePopUpMessageSnackbar()} /&gt;
          &lt;/div&gt;
      )
  }
          .....
  }
  </code></pre>
  <p><strong>Home.jsx</strong></p>
  <pre><code>getBuildAwsUrl(fileName){
          fetch(
             &quot;http://localhost:8000/getUrl?fileName=&quot;+fileName
          )
          .then(res =&gt; res.text()) (**)
          .then(text =&gt; {
              return text
          });
          
  
  
  
  &lt;CopyToClipboard
            
            fileName = {props.data.fileName}         
            getBuildAwsUrl={(fileName)=&gt;this.getBuildAwsUrl(fileName)}
          /&gt;
  </code></pre>
  <p>When I debug the code ,Once completion execution of fetch function control go back to the clipBoard (*) line and assign the <code>undefined</code> value .Then again come back to Home.jsx (**) line.I think this is the problem</p>
  <p>If I do like this(below code) ,if I return value directly it is working fine, and <code>el.value</code> assigned with expected value.here I replaced <code>fetch()</code> with <code>return</code></p>
  <pre><code>getBuildAwsUrl(fileName){
          return &quot;http://s3.backetname.aws/&quot;+fileName
  }
  
  </code></pre>
  <p>But I do not want like this ,it should fetch from the <code>http://localhost:8000/getUrl?fileName=value</code></p>
  <p>Please help me ...Thanks in advance</p>