I’m writing a custom select component (SelectBase) with a feature to replace base components created inside of the base component. For instance, if I don’t pass a ModalComponent inside SelectBase, I will use BaseModalComponent.
The problem is that the props of the ModalComponent prop are unknown and I want to make it possible to pass props of the ModalComponent inside of the SelectBase when using SelectBase with custom ModalComponent.
const SomeSelectInstance = SelectBase<ISomeSelectInstanceProps>;
I’ve stopped on next interface of SelectBase:
import { ComponentType } from 'react';
import { Drawer } from '@mui/material';
interface ISelectBaseProps<ModalProps> {
open: boolean;
modalRenderMode: 'desktop' | 'mobile'
ModalComponent?: ComponentType<ModalProps>;
ModalComponentProps?: ModalProps;
Inside of the SelectBase I need to use Drawer or custom BaseMenuList according to the modalRenderMode
value:
const BaseModalComponent = modalRenderMode === 'desktop' ? BaseMenuList : Drawer;
const Modal = ModalComponent ?? BaseModalComponent;
const modalElement = <Modal {...ModalComponentProps}>{children}</Modal>; // here I get Error
The error I get: “Type “{ children: ReactNode; }” cannot be assigned to type “ModalProps””
How can I solve this or maybe there is a better or more optimized variant?