S
SolidJS3mo ago
iNdra

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
4 Replies
peerreynders
peerreynders3mo 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
iNdra3mo ago
Yeas everything else is working. What should I do for that?
peerreynders
peerreynders3mo 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
iNdra3mo ago
Thanks I will check it