How can I assign modal form component opening function to any another button component-CodePudding

I have 2 components: ModalForm and BookCard. The ModalForm is supposed to be put inside of the BookCard. When you put the ModalForm - it creates new button and functionates as it has to. But what if instead of creating new button I want to assign ModalForm's functionality to already existing button?

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>   
    );
}

CodePudding user response：

Its looks like you need to handle the logic in the most up component in your case BookCard. So ModalForm has some props like isOpen in BookCard you need state like isModalOpened and then add callback onClick that change state (isModalOpened) and then react pass that prop(isOpen) to your ModalForm.