How to access onCopy event value in React - reactjs

Question

I want to edit copied content in onCopy event. But I checked that the parameter of onCopy event is a clipboardevent. So, is there a way that i can edit content on Clipboard through clipboardevent vairiable. Codes are like
<div onCopy = {(e)=>{//edit content through variable e}}>
//something here
</div>

Answer 1

So, if you want to see the value that you are copying, just edit the code like this.
<div onCopy = onCopy={e => console.log(e.target.innerText)}>
the text is placed inside the "innerText" key.
For React just initialize a state using useState, where you can save the value.
const Test = () => {
const [data, setData] = useState(null)
return (
<div onCopy={e => setData(e.target.innerText)}>
Hello
</div>
)
}

Answer 2

For a single <div> with no child elements, you can access the copied content using:
e.target.innerText
OR
e.target.textContent
Such as:
<div onCopy={(e) => console.log(e.target.innerText)}></div>
// You can use the value like this:
function MyComponent() {
const [copiedValue, setCopiedValue] = useState("");
return (
<>
<div>{copiedValue}</div>
<div onCopy={(e) => setCopiedValue(e.target.innerText)}></div>
</>
)
}
NOTE: There are important differences between innerText and textContent if your <div> has any child nodes. One big difference is:
textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows “human-readable” elements.
Source MDN Doc
I'm not getting the value of what I selected, I'm getting the entire value of the element!
Using the above event target properties, you will only be able to access the entire contents of the element being copied. If you want to copy the selected text from the user, you could do something like this:
function MyComponent() {
const [copiedValue, setCopiedValue] = useState("");
const handleOnCopy = (e) => {
const selectedText = document.getSelection(); // <-- this is different
setCopiedValue(selectedText);
};
return (
<>
<div>{copiedValue}</div>
<div onCopy={(e) => handleOnCopy(e)}></div>
</>
)
}
I'm getting undefined when accessing e.target.innerText and e.target.textContent!
This could be because you're trying to access the value of an <input> element. If you're trying to access a checkbox's boolean state use e.target.checked. For all the other <input>'s, use e.target.value