How can i copy a text with button ReactJS

Question

Hello I have an array and I want to copy text in p element ({item.adress}=> it is an array item) when i click the button. Can u help me?

import classes from './CryptoBox.module.css'


 const CryptoBox = (props) => {
  let item = props.item     
    
    return(
         <div className={classes.box}>
             {item.map(item => (
                <div className={classes.boxx} key={Math.random().toString(36).slice(2)}>
                    <img src={item.img} alt={item.id}/><br/>
                    <p id={item.adress} hidden>{item.adress}</p>
                    <span>
                        <button onClick={}> 
                            {props.link}
                        </button>
                    </span>
                </div> 
             ))}
         </div>
     )
 }

 export default CryptoBox;

Copy as in to clipboard? – Henry Woody Mar 01 '22 at 18:15 — Henry Woody, Mar 01 '22 at 18:15

score 2 · Answer 1 · answered Mar 01 '22 at 18:38

Inspired by this answer, but there are probably ways to optimise. If you want to copy to clipboard:



const CryptoBox = (props) => {
  let item = props.item;
     
  const copyValue = (val) => {
    // Create a "hidden" input
    var aux = document.createElement("input");

    // Assign it the value of the specified element
    aux.setAttribute("value", val);

    // Append it to the body
    document.body.appendChild(aux);

    // Highlight its content
    aux.select();

    // Copy the highlighted text
    document.execCommand("copy");

    // Remove it from the body
    document.body.removeChild(aux);
  };

    
    return(
         <div className={classes.box}>
             {item.map(item => (
                <div className={classes.boxx} key={Math.random().toString(36).slice(2)}>
                    <img src={item.img} alt={item.id}/><br/>
                    <p id={item.adress} hidden>{item.adress}</p>
                    <button onClick={() => copyValue(item.adress)}>
                       {props.link}
                    </button>
                
                </div> 
             ))}
         </div>
     )
 }

 export default CryptoBox;

score 1 · Accepted Answer · answered Mar 01 '22 at 18:47

Do you need the p tags? because if you want to copy to the clipboard you just have to do something like this in your button

<button onClick={() => navigator.clipboard.writeText(item.adress)}>
  {item.link}
</button>

The p tags are not necessary for copying to the clipboard because you actually have the value of the item.address when you're mapping so you can pass that instead of looking through the dom to find the p tag that is hidden for the user.

score -1 · Answer 3 · answered Mar 01 '22 at 18:23

Since I expect you want the paragraph to be hidden as per your code, you can just use "console.log" within your onClick function to output the item.address of which ever item you clicked on. Like below:

<button onClick={console.log()}> 
      {props.link}
</button>

How can i copy a text with button ReactJS

3 Answers3