JSX element type 'ModalComponent' does not have any construct or call signatures

user_14698387 0
Viewed 1070

enter image description here

interface ModalType {
  component: JSX.Element;
  props: object;
}
function Modal({ title, message, onConfirm }: ModalProps) {
  const [modal, setModal] = useState<ModalType|{}>({});
  // useEffect(()=> {
  //   ModalServcie.on('open', (({ component, props })) => {
  //     setModal({
  //       component
  //       props,
  //       close: () => {
  //         setModal({});
  //       }
  //     })
  //   })
  // },[]);

  const ModalComponent = (modal as ModalType).component ? (modal as ModalType).component : null;
  return (
    <ModalContainer>
      {
        ModalComponent && (
          <ModalComponent 
            { ...modal.props }
            close={ modal.close }
            className={ ModalComponent ? 'd-block' : '' }
          />
        )
      }
    </ModalContainer>
  );
}

I think there's an error because the modal component can be null.

Is it a problem that the correct object value was not added when setting the model state for the first time?

I thought it’s ambiguous to initialize state to a specific value before receiving props in useEffect.

How should I fix this?

jsx typescript reactjs
2 Answers

Try declaring the type and only rendering the component if it actually exists:

  const ModalComponent: React.Component | null = (modal as ModalType).component;
  if (ModalComponent) {
    return (
      <ModalContainer>
        <ModalComponent 
          {...modal.props}
          close={modal.close}
          className='d-block'
        />
      </ModalContainer>
    );
  } else {
    return <ModalContainer></ModalContainer>;
  }
user_5354670

I had a similar issue while using 'react-scroll' component Link. I observed when I modified my import statement as :

import {Link} from "react-scroll";

After this modification, the error was resolved. Hope this helps.

user_83425430
Related