How to update state in useeffect based on url using react and typescript?

Question

i want to change right property from 16px to 40px when user is in page "/items/:itemId" using react and typescript.

below is my component snippet,

const root = () => {
    <PopupContextProvider>
        <App/>
    </PopupContextProvider>
}


export const PopupContextProvider = ({ children }: any) => {
    return (
        <popupContext.Provider value={context}>
            {children}
            {(condition1 || condition2) && (
                <Popup onHide={dismiss} />
            )}
        </popupContext.Provider>
    );
}

export function Popup({ onHide }: Props) {
    const location = useLocation();
    const [isView, setIsView] = React.useState(false);
    if (location.pathname === '/items/:itemId') {
        setIsView(true);//here doesnt change to true. how can i do the same 
        //in useeffect or something that updates 
    }
    return (
        <Dialog isView={isView}>
            <DialogBody>
                <span>Title</span>
                <Description/>
            </DialogBody>
            <Actions>
                <span>Hide</span>
            </Actions>
        </Dialog>
    );
}


const Dialog = styled.div<isView?:boolean>`
    position: fixed;
    ${({ isView }) => isView && 'right:  40px;'}
    display: flex;
    flex-direction: column;
`;

In the above snippet, i check for location and update the isView state to true.

now even when user is in page "/items/:itemId" the isView is not updated from false to true.

how can i update state in useeffect???

could someone help me with this? thanks .

This same question has been asked already. Head to this link — Ramanpreet Singh
– Ramanpreet Singh, Commented Jul 21, 2020 at 3:18

DCTID · Accepted Answer · 2020-07-21 03:22:49Z

0

You don't need the isView state at all, just make it a const.

export function Popup({ onHide }: Props) {
    const location = useLocation();
    const isView = location.pathname === '/items/:itemId';
    return (
        <Dialog isView={isView}>
            <DialogBody>
                <span>Title</span>
                <Description/>
            </DialogBody>
            <Actions>
                <span>Hide</span>
            </Actions>
        </Dialog>
    );
}

State is only needed if you need to remember something that does change, like the user entering information or clicking a button, when React rerenders the component. But, in this case you probably aren't changing the path without reloading the page and getting a new instance of your component.

If you really want to use useEffect you can just put an empty array as the second arg which means it will only run when the component is created just like componentDidMount in class React.

export function Popup({ onHide }: Props) {
    const location = useLocation();
    const [isView, setIsView] = React.useState(false);
    useEffect(() => {
        if (location.pathname === '/items/:itemId') {
            setIsView(true);//here doesnt change to true. how can i do the same 
            //in useeffect or something that updates 
        }
    }, []);
    return (
        <Dialog isView={isView}>
            <DialogBody>
                <span>Title</span>
                <Description/>
            </DialogBody>
            <Actions>
                <span>Hide</span>
            </Actions>
        </Dialog>
    );
}

You might get a warning that you need to add isView into the empty array at the end. React wants you to watch the values you are modifying and call useEffect when they change. You can add it but it is weird because it will never change.

You could store isView in a ref then you wouldn't get the warning because ref updates do not cause a rerender, but again there is no reason to store this variable for rerenders it can be calculated quickly and easily.

answered Jul 21, 2020 at 3:22

DCTID

1,36710 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

saritha Over a year ago

thanks is it still okay to use location.pathname for dynamic values like in this path "/items/:itemId" here itemId can be any number.

saritha Over a year ago

Here for the first time the popup mounts in page "/items" on clicking a button in that page. now when user navigates to "/items/:itemId" i want to check this url. for some reason the isView doesnt update either in useeffect too. could you please help me. i am trying this from one day now.

DCTID Over a year ago

Do you mean you want to change isView when the location changes? That should happen from the useLocation call.

Collectives™ on Stack Overflow

How to update state in useeffect based on url using react and typescript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related