title: Copy text from a div to clipboard using document.execCommand in React
body: <p>I am attempting to copy text from a <code>div</code> after the URL is shortened.</p>
  <p>I have placed a <code>ref</code> value in the <code>div</code> that will render the shortend URL. But, I am getting error:</p>
  <blockquote>
  <p>TypeError: inputArea.input.select() is not a function.</p>
  </blockquote>
  <p>I am not sure how to reference the text within the div.</p>
  <pre><code>import { useCallback, useEffect, useRef, useState } from &quot;react&quot;;
  
  const Shorten = () =&gt; {
          
      const [copySuccess, setCopySuccess] = useState('');
      const inputArea = useRef(null);
          
      function copyLink(e){
          inputArea.current.select();
          document.execCommand('copy');
          e.target.focus();
          setCopySuccess('Copied!');
      };
   
      {isPending &amp;&amp; &lt;div className=&quot;loading-text&quot;&gt;Loading...&lt;/div&gt;}
      {shortLink &amp;&amp; &lt;div ref={inputArea} className=&quot;shorten-text&quot;&gt;{shortLink}&lt;/div&gt;}
      &lt;hr&gt;&lt;/hr&gt;
      &lt;div&gt;
        &lt;button className=&quot;shorten-it&quot; onClick={copyLink} &gt;Copy&lt;/button&gt;
        {copySuccess}
      &lt;/div&gt;
    &lt;/section&gt;
  </code></pre>