I have a page where I have a grid of elements that need buttons to request or show more data that won't fit on the page and I don't want the page to change.

I would like the modal template in their own component, not to clutter up the parent. Doing this, I have been forced to put a button to open the modal in the modal component which then gets put into the parent. This causes many unused modals to be in memory.

How can I have lots of buttons on the page that create modals without having the modal in memory ready for a show/hide.

Ideally, I'd like a component I can just feed props to so it knows what to display and I can open/close it with the proper visuals and interactable components (input box, buttons, etc).

I am trying to avoid using a third party dependency, as I have found a few modal specific npm packages, I don't think this is complicated enough to need a dependency. The way I have been creating modals though doesn't work when I have a lot of buttons that spawn modals on the same page.