How do I make the svg icons I am using in my NextJS project to copy to clipboard? Please Note i am using Tailwindcss for inline styling

0
votes

enter image description hereimport statements

I am trying to copy to clipboard from the paragraph tag that contains static text when the svg icon beside it is clicked but I can't seem to find a way

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js">

import React, {useState} from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import Avatar from "react-avatar";
import styled from "styled-components";
import Link from "next/link";
import UpdateInput from "../UpdateInput";
import { updateStructure } from "../../data/Update";
import Loading from "../Loading";
import {CopyToClipboard} from 'react-copy-to-clipboard';
import ContentCopy from "@mui/icons-material/ContentCopy";


const Update = () => {

 
  
return (
    <Container>
        <DivContainer>
        <LeftPane>
            <div className="flex-nowrap min-w-fit text-white">
            <div className="flex flex-nowrap gap-3 mt-5 justify-center align-center mb-2" >
            
            <Avatar  color={Avatar.getRandomColor('sitebase', ['red', 'green', 'orange'])} name="W" id="William" size ="80" round={true}/>
            <div className="justify-center align-center mt-5 text-left">
            <span><p>Williams Ted</p></span>
            <span><p className="text-xs">Trader</p></span>
            <span><p className="text-sm">@username</p></span>
            
            </div>
            </div>
               
            <div className="ml-20 box-border text-center">
                <p>[email protected]</p>
                <p>+2349012345678</p>
                <p>********986</p>
            </div>

            <div className="justify-start text-left flex-nowrap w-full">
                <br />
                <div className="details  leading-6 text-left text-sm">
                  
                    <div className="justify-between gap-5">
                        <div className="flex items-center gap-5" style={{marginBottom: '-5px'}}>
                        <div className="manage items-center justify-center">
                            <p className=" w-44 ">Account Name: </p>
                            
                        </div>
                        
                        <div className=" w-full items-center ">
                            <p className="w-max text-sm">William Ted</p>
                        </div><svg className="w-12 h-8 items-center" data-testid="ContentCopy"> <ContentCopy htmlColor="white"/></svg>

                        </div>
                        
                       

                        <div className="flex items-center gap-5" style={{marginBottom: '-5px'}}>
                         <div className="wmanage2 items-center justify-center">
                            <p className="w-44">Bank: </p>
                        </div>

                        <div className="w-full items-center text-sm text-left">
                            <p className="w-max">Wema Bank</p>
                            </div><svg className="w-12 h-8 items-center" data-testid="ContentCopy"> <ContentCopy htmlColor="white"/></svg>
                        </div>

                </LeftPane>
       
        </DivContainer>
    </Container>
 
};

export default Update;
        
        





</script>

I am trying to make the svg icons copy to clipboard the value of the text in the paragraph tags in my reactJS project but it is not working I need assistance. How do I use the copy to clipboard. I have tried all I can.

reactjsnext.jstailwind-css