I currently use the render function pattern in order to allow for custom action buttons on modals to close the modal (refer to the source code for more details). However, I realize that this way of doing things is way too confusing and messy, so I'm coming up with another solution to make the code for modals easier to understand.
Solution: For components like ButtonWithConfirmationModal that uses ButtonWithModal (which uses BaseModal), instead of passing the modal action buttons via ButtonWithConfirmationModal.children, then ButtonWithModal passes that same children, unaltered, to BaseModal for the render function pattern, I pass down to ButtonWithModal a prop called buttonList, which is a list of objects that contain props for a Button component (objects are of type ActionButton), in order to render the buttons in ButtonWithModal instead. This works well because ButtonWithModal contains the handleClose function that BaseModal needs (handleClose = () => setOpen(false)) already so I can just use it with the onClickFunc prop of ActionButton to do what I mentioned in the previous paragraph. I realize that this might sound a bit confusing but it will definitely be a lot easier to understand than what I have currently.
I currently use the render function pattern in order to allow for custom action buttons on modals to close the modal (refer to the source code for more details). However, I realize that this way of doing things is way too confusing and messy, so I'm coming up with another solution to make the code for modals easier to understand.
Solution: For components like ButtonWithConfirmationModal that uses ButtonWithModal (which uses BaseModal), instead of passing the modal action buttons via ButtonWithConfirmationModal.children, then ButtonWithModal passes that same children, unaltered, to BaseModal for the render function pattern, I pass down to ButtonWithModal a prop called buttonList, which is a list of objects that contain props for a Button component (objects are of type ActionButton), in order to render the buttons in ButtonWithModal instead. This works well because ButtonWithModal contains the handleClose function that BaseModal needs (handleClose = () => setOpen(false)) already so I can just use it with the onClickFunc prop of ActionButton to do what I mentioned in the previous paragraph. I realize that this might sound a bit confusing but it will definitely be a lot easier to understand than what I have currently.