SolidJS•4mo ago

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

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

4 Replies

peerreynders•4mo ago

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.

iNdra•4mo ago

Yeas everything else is working. What should I do for that?

peerreynders•4mo ago

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 <>{/* … */}</>;
}

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 <>{/* … */}</>;
}

iNdra•4mo ago

Thanks I will check it

Gaming

Programming

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