How to open a dialog from a child Outlet route?
I have a dialog in a parent component. I want my outlet routes to be able to open that dialog but can't find a way to pass the openDialog function the child route since outlet doesnt accept props.
const openDeleteDialog = (type: string, itemId: number) => {
setDeleteDialogOpen(true);
setItemToDelete(itemId);
setItemType(type);
};
I have a function like this that needs to be called in the child route. Any help would be appreciated thanks!6 Replies
sensitive-blue•11mo ago
You could pass it down via context I guess (not entirely sure in this one, might only work with layout and child 🤔) or use something like Zustand and have it be "global" state
judicial-coralOP•11mo ago
thanks ill look into it a little more. I had my site setup with a single dialog in the parent layout that handled multiple cases, but i guess i could just add a dialog to each child route instead with its own state
the purpose is just to create an "Are you sure you want to delete this item" dialog
sensitive-blue•11mo ago
Yea you could have multiple dialogs or handle the dialog state globally via Zustand or similar than you import that Zustand state into any page from where you want to control this 1 global popup
judicial-coralOP•11mo ago
i'll checkout zustand, havent worked with it before. With react router its possible to pass context to an outlet with a prop so itd be interesting to figure out why tanstack decided to avoid implementing this
sensitive-blue•11mo ago
I think they might still implement outlet props at some point iirc there's an open issue on GitHub
judicial-coralOP•11mo ago
I do see an open discussion on github so we will see if anyone from the team gives their opinion on it! Thanks for the help