Search code examples
javascripthtmlreactjscomponents

How to make component inside a component?

<Modal>
    <Modal.Footer>
        // any custom content. User can completely control behavior of this content. 
    </Modal.Footer>
</Modal>

export const ModalFooter = ({children}) => {
     return <div className={'modal-footer'}>{children}</div>
}

.modal-footer {
    // css to make footer sticky or scrollable. 
}

The scenario is that the footer of the Modal is going to be an optional feature. Only if the person sends <Modal.Footer/>, will that appear. So I want to create <Modal.Footer> inside the modal component. Can someone please tell me how to achieve that?

Solution

  • create like this

    const Modal = ({ children }) => <>{children}</>;

const ModalFooter = ({children}) => {
     return <div className={'modal-footer'}>{children}</div>
}

Modal.Footer = ModalFooter;
export default Modal;