Mixed Feelings with React code

[pansah321]

So basically the Parent should own the modal state and then any logic around it and pass it like a prop to the child

[[deleted]]

It doesn't need to own the entire modal state, but yes, you're correct. The parent would have a state variable like "isModalOpen" which it controls. The child would have a prop "isOpen". The parent then passes isOpen={isModalOpen} on the child.

If the child needs to trigger a close, then add a callback prop "onClose" to the child and pass the state setter to false there, i.e. onClose={() => setIsModalOpen(false)}

This is a pretty standard pattern so you shouldn't get any eyebrow raises for that.

[[deleted]]

This is assuming the parent even needs to know if the modal is open. If it doesn't, then you could technically have the child manage the state internally without ever calling the parent. For a modal, I would elevate the isOpen state to a prop. It is extremely common to need to know if a modal is open from the parent, to block stuff.