Estoy mapeando una serie de tarjetas en un componente de formulario como este:
``` {links?.map((i,j) => ( <main className={styles["card-container"]} key={j}> <Card url={i?.url} shortenUrl={i?.shorten} /> </main> ))} ``` Esa Card muestra un enlace URL, un enlace acortado y un botón que dice "clic"
<div> <div>{url}</div> <div>{shortenUrl}</div> <Button>Copy</Button> </div> El Button también es un componente reutilizable,
return ( <> <button>{children}</button> </> )Lo que quiero hacer:
lo que he probado:
form mediante la perforación de accesorios al componente Botón, pero no funciona como se esperaba.¿Alguna solución a esto?
Gracias por leer hasta aquí
Agregue el estado local a cada componente de la Card , cree un controlador de clic local que alterne el estado y llame a cualquier controlador onClick pasado.
Ejemplo:
const [copy, setCopy] = useState(); const clickHandler = (e) => { setCopy(copy => !copy); // call any external click handler, pass onClick event object, etc... }; <div> <div>{url}</div> <div>{shortenUrl}</div> <Button onClick={clickHandler}> {copy ? "Copied" : "Copy"} </Button> </div> Si desea solo un botón seleccionado a la vez, levante el estado al componente principal, represente los componentes de la Card y pase como accesorios la tarjeta seleccionada actualmente y una devolución de llamada para alternar la tarjeta seleccionada.
Ejemplo:
const [selected, setSelected] = React.useState(null); const toggleSelected = index => { // toggle null if deselecting current selected, // otherwise set selected as new index setSelected(selected => selected === index ? null : index); }; ... {links?.map((i, index) => ( <main className={styles["card-container"]} key={index}> <Card url={i?.url} shortenUrl={i?.shorten} selected={selected === index} onClick={() => toggleSelected(index)} /> </main> ))}...
const Card = ({ url, shortenUrl, selected, onClick }) => { ... return ( ... <div> <div>{url}</div> <div>{shortenUrl}</div> <Button onClick={onClick}> {selected ? "Copied" : "Copy"} </Button> </div> ... ); };