[SOLVED] How can i copy a text with button ReactJS

Issue

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;

Solution

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.

Answered By – jean182

Answer Checked By – Robin (BugsFixing Admin)