how to copy text to the clipboard in React JS?

You can use the Clipboard API to copy text to the clipboard in a React application. Here’s an example of how to do this:

import React, { useState } from 'react';

function App() {
  const [textToCopy, setTextToCopy] = useState('');
  const [copySuccess, setCopySuccess] = useState(false);

  const handleCopyClick = () => {
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        setCopySuccess(true);
      })
      .catch((error) => {
        console.error('Failed to copy: ', error);
      });
  };

  return (
    <div>
      <input
        type="text"
        value={textToCopy}
        onChange={(e) => setTextToCopy(e.target.value)}
        placeholder="Enter text to copy"
      />
      <button onClick={handleCopyClick}>Copy to Clipboard</button>
      {copySuccess && <p>Text copied successfully!</p>}
    </div>
  );
}

export default App;

In this example, the navigator.clipboard.writeText(text) function is used to write the provided text to the clipboard. When the button is clicked, the handleCopyClick function is called, which attempts to copy the textToCopy value to the clipboard. If the copy is successful, it sets the copySuccess state to true and displays a success message.

However, it should be noted that the Clipboard API has certain browser compatibility considerations, so make sure to test this functionality on different browsers to ensure it works as expected.