Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

318
Views
How can i copy a text with button ReactJS

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;
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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;
about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!