How to Copy & Paste the text on Click using the JavaScript or ReactJS ?

In the HTML page add the div tag with id

<div id="copydata">Copy the this text by the button</div>

Add one button to call the function of JS

 <button onclick="copyData()">Copy</button>

And one input button to paste the copy text

<input type="text" name="" id="" />

JavaScript Function

<script>
      copyData = () => {
        var ctype = document.getElementById("copydata").innerHTML;
        navigator.clipboard.writeText(ctype);
        alert("Copied Done 🤙🤙");
      };
    </script>

Done ✔🎯

Complete Code ✨👻🤑

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CopyData</title>
  </head>
  <body>
    <div id="copydata">Copy the this text by the button</div>

    <button onclick="copyData()">Copy</button>
    <br />
    <input type="text" name="" id="" />
    <script>
      copyData = () => {
        var ctype = document.getElementById("copydata").innerHTML;
        navigator.clipboard.writeText(ctype);
        alert("Copied Done 🤙🤙");
      };
    </script>
  </body>
</html>

Paste text

Add Button tag to call the event listener

 <button>Paste</button>

Add paragraph tag to add the copy text

 <p id="clipboard-paste"></p>

JavaScript function

document.addEventListener('DOMContentLoaded',function(){
            let pasteButton = document.getElementsByTagName('button')[1];
            pasteButton.addEventListener('click', function () {
                navigator.clipboard
                    .readText()
                    .then(
                        cliptext =>
                            (document.getElementById('clipboard-paste').innerText = cliptext),
                            err => console.log(err)
                    );
            });
})

Complete code with Copy/Paste 🎉⭐✨

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CopyData</title>
  </head>
  <body>
    <div id="copydata">Copy the this text by the button</div>

    <button onclick="copyData()">Copy</button>
    <br />
    <input type="text" name="" id="" /> <br />

    <button onclick="">Paste</button> <br />
    <p id="clipboard-paste"></p>

    <script>
      copyData = () => {
        var ctype = document.getElementById("copydata").innerHTML;
        navigator.clipboard.writeText(ctype);
        alert("Copied Done 🤙🤙");
      };

      document.addEventListener('DOMContentLoaded',function(){
            let pasteButton = document.getElementsByTagName('button')[1];
            pasteButton.addEventListener('click', function () {
                navigator.clipboard
                    .readText()
                    .then(
                        cliptext =>
                            (document.getElementById('clipboard-paste').innerText = cliptext),
                            err => console.log(err)
                    );
            });
        }
      )
    </script>
  </body>
</html>