#TypeError: useContext is not a function or its return value is not iterable

4 messages · Page 1 of 1 (latest)

patent granite
#

I create a model component for reuse. I got "TypeError: useContext is not a function or its return value is not iterable" error. How to solve this error. This code is in single file.

Error happening in const [{ show, hide }] = useContext(ModelPUp); line

📎 message.txt
fickle lance
#

The code composing together the components is external to this file.

Assuming everything else is working:

ModalPUp is undefined until the ModalPopUp executes. If any of the other Modal* components run beforehand ModalPUp will still be undefined.

patent granite
fickle lance
#

In broad strokes:

let modeld = undefined;
const showhide = [
  {
    show() {
      if (modeld && modeld.isHidden()) {
        modeld.show();
      }
    },
    hide() {
      if (modeld && modeld.isVisible()) {
        modeld.hide();
      }
    },
  },
];

const ModelPUp = createContext(showhide);

export default function ModalPopUp(props) {
  // …
  onMount(() => {
    modeld = new Modal(modalElement, modalOptions, instanceOptions);
  });
  onCleanup(() => {
    modeld = undefined;
  });

  return <>{/* … */}</>;
}