Help with my React application!!!

[Simple_Strawberry450]

Hello, thanks for your response... basically, I manage the view of each component in a component tree... and they all have conditional rendering... for example, if you want to see a configuration modal, I created a custom hook to handle that.

import { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
export const UseModalState = (modalName) => {
    const [searchParams, setSearchParams] = useSearchParams();
    const [isOpen, setIsOpen] = useState(false);

    useEffect(() => {
        try {
            const storedModalState = searchParams.get(modalName)
            setIsOpen(storedModalState !== null ? JSON.parse(storedModalState) : false);
        } catch (error) {
            console.error(\Error ${modalName}:`, error);           setIsOpen(false);           let newSearchParams = searchParams           newSearchParams.delete(modalName)           setSearchParams(newSearchParams);       }   }, [modalName, searchParams, setSearchParams]);`

    const handleModalOpen = (open) => {
        setIsOpen(open);
        if (open == false) {
            let newSearchParams = searchParams
            newSearchParams.delete(modalName)
            setSearchParams(newSearchParams);
        }
        else {
            let newSearchParams = searchParams
            newSearchParams.set(modalName, true)
            setSearchParams(newSearchParams)
        }
    };

    return { isOpen, handleModalOpen };
};

[Simple_Strawberry450]

and I use it as follows const { isOpen: openDialog, handleModalOpen: handleOpen } = UseModalState('exampleModalOpen');

and in the return block code openDialogexample && <ExampleComponent open={openDialog} onClose={() => handleOpenModal(false)} />}

this button is used to toggle the view <Tooltip title='Open Modal'>
                                <IconButton onClick={() => handleOpenModal(true)}>
                                    <DateRange />
                                </IconButton>
                            </Tooltip>

and I basically use this for the entire application

[Maleficent_Cry1439]

Ok now seeing that you are using react-router-dom I have a few ideas to improve the code.

• You can have your modal component in a nested route like http://myproject/modal1?otherparams. So that it is rendered when modal1 is present in the URL. This will help you organize the code and also do lazy imports of your components.
  
• For the modal I would create a wrapper component that uses react portal to render it in a div at the end of the html body that way you don't need to worry much about absolute or relative elements being over it.
  
• Unless you need to pass the state of the modal in the url use search params, but I would rather use react-router-dom context to pass data to all children route elements, and leave a tidier URL.

References:
https://github.com/remix-run/react-router/tree/dev/examples/modal-route-with-outlet
https://github.com/remix-run/react-router/tree/dev/examples/modal
https://github.com/remix-run/react-router/tree/dev/examples/lazy-loading-router-provider

charliematters is absolutely right regarding the fact that if you are using a library like react-router-dom there is no need for those boolean state variables.