I'm working on a React webapp and I'm trying to implement a set of modals, all with the same styling, but with different bodies, but the way different libraries and tutorials tell you to do it doesn't make that much sense to me. What they suggest is that I should embed the modal body below the button that's going to toggle it, but that doesn't make a lot of sense in my head.

Coming from different frameworks, what I'd do is create a generic modal that, using functions to open and close it, it'd get rendered inside an empty modal container HTML element, and I'd extend from that generic modal to make every modal I need.

For react, using exclusively functional components, I was thinking about creating a modal factory, a (non JSX) function that receives the body of the modal, places it inside the generic, renders it invisible inside the container, and returns an object with the two methods to interact with a state hook that would toggle it's visibility. I've tried doing this but I'm getting errors related to the hooks, which leads me to believe you're not meant to do it like that hahahah

My question is, how should I tackle this problem? How do I create that sort of generic modal/modal factory for my project?