How can i copy a text with button ReactJS-CodePudding

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;

CodePudding user response：

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>

CodePudding user response：

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;

CodePudding user response：

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.