Tengo 2 componentes: ModalForm y BookCard . Se supone que ModalForm debe colocarse dentro de BookCard . Cuando coloca ModalForm , crea un nuevo botón y funciona como tiene que hacerlo. Pero, ¿qué pasa si en lugar de crear un nuevo botón quiero asignar la funcionalidad de ModalForm a un botón ya existente?
BookCard.js
const BookCard = ({id, name, cover, description, price, count, loadResponse}) => { return ( <Card> //some code <ModalForm /*some props*/ /> <button className="edit-button"> // <- the button, I want to be assigned to be opening modal <box-icon name='edit-alt'/> </button> </Card> ); }ModalForm.js
const ModalForm = ({/*some props*/}) => { //some code return ( <div> <Button onClick={handleClickOpen} /> // <- the button that is being shown instead of the wanted one //some code </div> ); }Parece que necesita manejar la lógica en el componente más alto en su caso BookCard. Entonces, ModalForm tiene algunos accesorios como isOpen en BookCard, necesita un estado como isModalOpened y luego agregue la devolución de llamada al hacer onClick en ese state (isModalOpened) y luego reaccione y pase ese accesorio (isOpen) a su ModalForm .