Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

319
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda