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

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•2y 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•2y ago

<@1011493481136541737> kapa.ai is still learning and improving, please let us how it did by reacting below

harsh-harlequin•2y ago

what you mean by re-render ?

genetic-orange•2y 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

harsh-harlequin•2y ago

is multiple select box's data is came from api ?

genetic-orange•2y ago

yes

harsh-harlequin•2y ago

you can refetch data after any event

genetic-orange•2y ago

How? any hooks ?

harsh-harlequin•2y 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

genetic-orange•2y ago

okay..Thank you