Update Edit Modal after an Event

In edit modal, I am updating few fields on an event, How to re-render the UI?
11 Replies
kapa.ai
kapa.ai2y ago
Hi @Shyamili. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai2y ago
---------------------- To re-render the UI when updating fields in an edit modal, you can use the useEffect hook to listen for changes in the fields and trigger a re-render. In the example below, taken from the PostEdit component (https://refine.dev/blog/awesome-react-windows95-ui-with-refine/#part-4), you can add a dependency array to the useEffect hook to listen for changes in the fields you want to update:
import { useEffect } from "react";
// ... other imports

export const PostEdit: React.FC = () => {
// ... other hooks and variables

useEffect(() => {
resetField("categoryId");
}, [options]); // Add the fields you want to listen for changes here

// ... rest of the component
};
import { useEffect } from "react";
// ... other imports

export const PostEdit: React.FC = () => {
// ... other hooks and variables

useEffect(() => {
resetField("categoryId");
}, [options]); // Add the fields you want to listen for changes here

// ... rest of the component
};
In this example, the useEffect hook listens for changes in the options variable and triggers a re-render by calling resetField("categoryId"). You can modify the dependency array to include the fields you want to update and trigger a re-render when they change. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
We are going back to 1995! The perfect harmony of Modern stack and ...
With the refine being headless, we may use any UI we choose for our Admin Panel. In this tutorial, we'll create a Nostalgic-style admin panel using refine and React95 UI.
kapa.ai
kapa.ai2y ago
<@1011493481136541737> kapa.ai is still learning and improving, please let us how it did by reacting below
other-emerald
other-emerald2y ago
what you mean by re-render ?
fascinating-indigo
fascinating-indigo2y ago
I am deleting some data which is already selected in a multiple select box. after deleting that value from another logic in the same UI, its not reflecting in the select box
other-emerald
other-emerald2y ago
is multiple select box's data is came from api ?
fascinating-indigo
fascinating-indigo2y ago
yes
other-emerald
other-emerald2y ago
you can refetch data after any event
fascinating-indigo
fascinating-indigo2y ago
How? any hooks ?
other-emerald
other-emerald2y ago
useSelect returns queryResult, you can use refetch() function
const {
selectProps: categorySelectProps,
queryResult: useSelectQueryResult
} = useSelect<ICategory>({
resource: "categories",
defaultValue: postData?.category.id,
onSearch: (value) => [
{
field: "title",
operator: "contains",
value
}
]
});

useSelectQueryResult.refetch()
const {
selectProps: categorySelectProps,
queryResult: useSelectQueryResult
} = useSelect<ICategory>({
resource: "categories",
defaultValue: postData?.category.id,
onSearch: (value) => [
{
field: "title",
operator: "contains",
value
}
]
});

useSelectQueryResult.refetch()
actually all data hooks return this
fascinating-indigo
fascinating-indigo2y ago
okay..Thank you