ModalCompound.js

const Modal = ({ children }) => {
  return (
    <div className="Modal">
      <div className="Modal-content">{children}</div>
    </div>
  );
};

const ModalHeader = ({ children }) => {
  return (
    <div className="Modal-header">
      <h2>{children}</h2>
    </div>
  );
};

const ModalBody = ({ children }) => {
  return <div className="Modal-body">{children}</div>;
};

const ModalActions = ({ children }) => {
  return <div className="Modal-actions">{children}</div>;
};

// This is optional, but shows the explicit link between the components
Modal.Header = ModalHeader;
Modal.Body = ModalBody;
Modal.Actions = ModalActions;

export default Modal;