DEV Community

Chris Moore
Chris Moore

Posted on

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

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= ({
    noText = 'No',
    yesText = 'Yes',
}) => {
    const { toggle, isOpen, openModal } = useModalForm();
    return (
            <ModalWrapper className={className} isOpen={isOpen} toggle={toggle}>
                <AppModalHeader toggle={toggle}>{modalTitle}</AppModalHeader>
                {isOpen ? (
                            onClick={() => {
                                if (onYesAction !== undefined) {
                            {yesText != null ? yesText : 'Yes'}
                ) : null}
                triggerModal: () => openModal({ id: undefined }),

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):

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

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

Top comments (0)