fixed get shareable link

src/Components/ShareModal.js

@@ -33,11 +33,14 @@ import LinkIcon from '../img/link_icon.svg'
 import CloseModalButton from './CloseModalButton.js'
 
 export default function ReportModal (props) {
-    const refContainer = useRef(props.link);
-
-    function copyToClipboard(e) {
-        let copyText = document.getElementById('p-text')
-        console.log(copyText)
+    const textAreaRef = useRef(props.link);
+
+    const copyToClipboard = (e) => {
+        textAreaRef.current.select();
+        document.execCommand('copy');
+        // This is just personal preference.
+        // I prefer to not show the whole text area selected.
+        e.target.focus();
     };
 
     return (
@@ -97,10 +100,14 @@ export default function ReportModal (props) {
 
                             {/*Get shareable link*/}
                             <Grid item xs={4}>
+                                {
+                                    document.queryCommandSupported('copy') &&
                                 <ShareButton onClick={copyToClipboard}>
                                     <img src={LinkIcon} alt="link-icon"/>
-                                    <p id="p-text" value={props.link}>COPIAR LINK</p>
+                                    <p>COPIAR LINK</p>
+                                    <textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/>
                                 </ShareButton>
+                                }
                             </Grid>
                         </Grid>
                         </ShareInfo>