Creé un componente modal que utiliza el contexto de React y enlaces para facilitar su uso. Pero por alguna razón, el elemento que quiero representar en el modal no aparece.

Aquí está mi código para ModalContainer que contiene el proveedor y el modal

ModalContainer.tsx

 export type ModalElement = | React.ComponentClass<any, any> | React.FC<any> | JSX.Element; const ModalContainer: React.FC = ({ children }) => { const [visible, setVisible] = useState(false); const modal = useRef<HTMLDivElement>(null); const showModal = (element: ModalElement) => { if (element && modal.current) { if (React.isValidElement(element)) { ReactDOM.render(element, modal.current); } else { const el = React.createElement( element as React.ComponentClass<any, any> | React.FC<any>, {} ); ReactDOM.render(el, modal.current); } setVisible(true); } }; const dismissModal = () => { setVisible(false); }; return ( <ModalContext.Provider value={{ showModal, dismissModal }}> {children} <Modal visible={visible} onClose={dismissModal} ref={modal} /> </ModalContext.Provider> ); }; export default ModalContainer;

useModal.ts

 export const useModal = (element: ModalElement) => { const context = useContext(ModalContext); if (!context) { Error(`Can't get modal context`); } const show = useCallback(() => { context.showModal(element); }, [context, element]); const dismiss = useCallback(() => { context.dismissModal(); }, [context]); return [show, dismiss]; };

De una manera que lo usarás como tal:

 const DivModal: React.FC = () => { return <div>Test</div> } const Component: React.FC = () => { const [show, dismiss] = useModal(DivModal); const onClick = () => { show(); } return <button onClick={onClick}/> }

El problema parece ocurrir cuando creo un elemento usando React.createElement en ModalContainer.tsx que se encuentra específicamente en esta línea:

 const el = React.createElement( element as React.ComponentClass<any, any> | React.FC<any>, {} ); ReactDOM.render(el, modal.current);

El modal se procesa correctamente si reemplazo el en la función de procesamiento con un JSX de prueba como <div>test</div> . Realmente no puedo entender qué está mal, así que lo publicaré aquí en caso de que alguien sepa cuál es el problema. ¡Gracias!