Using a Custom React based Modal, how can I pass a dynamic triggering function so I can re-use the component?

Chris Moore — Tue, 19 May 2020 17:49:49 +0000

I have the following component which makes up my modal:

import React from 'react';
import { ModalBody, Button, Alert } from 'bootstrap';
import { AppModalHeader } from '../../common/AppModalHeader';
import ModalWrapper from './ModalWrapper';

const QuestionModal= ({
    title,
    noText = 'No',
    yesText = 'Yes',
    questionText,
    onYesAction
    children
}) => {
    const { toggle, isOpen, openModal } = useModalForm();
    return (
        <React.Fragment>
            <ModalWrapper className={className} isOpen={isOpen} toggle={toggle}>
                <AppModalHeader toggle={toggle}>{modalTitle}</AppModalHeader>
                {isOpen ? (
                    <ModalBody>
                        <p>{questionText}</p>
                        <Button
                            className="float-right"
                            color="primary"
                            onClick={() => {
                                if (onYesAction !== undefined) {
                                    onYesAction(toggle);
                                }
                            }}
                        >
                            {yesText != null ? yesText : 'Yes'}
                        </Button>
                    </ModalBody>
                ) : null}
            </ModalWrapper>
            {children({
                triggerModal: () => openModal({ id: undefined }),
                toggle
            })}
        </React.Fragment>
    );
};

export default QuestionModal;

`
I want to use it as such, where I can dynamically choose the name of the trigger that opens the modal:

In use e.g. (note: the inner question modal would be repeated, used 4 or 5 times in my application):
`

....
<QuestionModal
     //....params that match up with above
    >
    {({ triggerModal }) => (
    <QuestionModal
         //....params that match up with the component
    >
        {({ triggerModal2 }) => (
        <>
           <Button onClick={()=>triggerModal();}>Trigger Modal 1</Button>
           <div>
               <Button onClick={()=>triggerModal2();}>Trigger Modal 2</Button>
           </div>
        </>
    </>
    )}
</QuestionModal>
....

`
How could I achieve this, by extending the question modal to pass a dynamic function? Just because I keep getting stuck in having to think about duplicating the original component, I want to make this component as reusable as I can. Any help would be greatly appreciated.

Thanks in advance

DEV Community: Chris Moore

Using a Custom React based Modal, how can I pass a dynamic triggering function so I can re-use the component?