Hola, tengo una matriz y quiero copiar texto en el elemento p ({item.adress}=> es un elemento de matriz) cuando hago clic en el botón. ¿Puedes ayudarme?
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;Inspirado por esta respuesta, pero probablemente haya formas de optimizar. Si desea copiar al portapapeles:
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;¿Necesitas las etiquetas p? porque si quieres copiar al portapapeles solo tienes que hacer algo como esto en tu boton
<button onClick={() => navigator.clipboard.writeText(item.adress)}> {item.link} </button> Las etiquetas p no son necesarias para copiar en el portapapeles porque en realidad tiene el valor de item.address cuando está mapeando para que pueda pasar eso en lugar de buscar a través del dom para encontrar la etiqueta p que está oculta para el usuario.
Como espero que desee que el párrafo se oculte según su código, puede usar "console.log" dentro de su función onClick para generar la dirección del elemento del elemento en el que hizo clic. Como abajo:
<button onClick={console.log()}> {props.link} </button>