Stack Overflow Asked by saritha on November 24, 2021
A popup is displayed when the add button is clicked and the count is greater or less than 0.
below is the code,
function AddButton () {
const [isOpen, setIsOpen] = React.useState(false);
const count = useGetCount();
useTrigger(isOpen, count);
const on_add_click = () => {
setIsOpen(true);
}
return (
<button onClick={on_add_click}>add</button>
);
}
interface ContextProps {
trigger: (count: number) => void;
}
const popupContext = React.createContext<ContextProps>({
trigger: (count: number) => {},
});
const usePopupContext = () => React.useContext(popupContext);
export const popupContextProvider = ({ children }: any) => {
const [show, setShow] = React.useState(false);
const limit = 0;
const dismiss = () => {
if (show) {
sessionStorage.setItem(somePopupId, 'dismissed');
setShow(false);
}
};
const isDismissed = (dialogId: string) =>
sessionStorage.getItem(dialogId) === 'dismissed';
const context = {
trigger: (count: number) => {
if (!isDismissed(somePopupId) && count <= limit) {
setShow(true);
} else if (count > limit) {
setShow(false);
}
},
};
return (
<popupContext.Provider value={context}>
{children}
{show && (
<Popup onHide={dismiss} />
)}
</popupContext.Provider>
);
};
export function useTrigger(enabled: boolean, count: number) {
const { trigger } = usePopupContext();
React.useEffect(() => {
if (enabled) {
trigger(count);
}
}, [enabled, count, trigger]);
}
This works but calls trigger method only when enabled is true.
I want to modify the above code such that when the user clicks the add button, I want this useTrigger to happen. I don’t want to check for enabled and call trigger.
I have tried the following removed checking for enabled.
export function useTrigger(enabled: boolean, count: number) {
const { trigger } = usePopupContext();
React.useEffect(() => {
trigger(count);
}, [enabled, count, trigger]);
}
this works but the popup is displayed as the count is less than or equal to 0. but I want it to first check if the add button clicked or not.
so soon after the user clicking the add button in on_add_click I want the popup to display.
How can I modify the code above? I am new to using hooks. Could someone help me with this? thanks.
EDIT:strong text
i have tried to do something like below and i get error
Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.
on_add_click = () => {
Trigger(count);
}
export function Trigger(count: number) {
const { trigger } = usePopupContext();
React.useEffect(() => {
trigger(count);
}, [count, trigger]);
}
how can i fix this.
If I followed you right, you just need to add a state to your hook and return the setter to call it onclick:
export function useTrigger(count: number) {
const [clicked, setClicked] = React.useState(false)
const { trigger } = usePopupContext();
React.useEffect(() => {
if(clicked) {
trigger(count);
}
}, [count, trigger, clicked]);
const clickCb = useCallback(() => {setClicked(true)}, [])
return cb
}
Then in your component with button you do something like this:
const Component = (props) => {
const onClick = useTrigger(props.count)
/* ... */
return <button onClick={onClick}/>
}
Answered by dkuznietsov on November 24, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP