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•16mo 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•16mo 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•16mo ago

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

optimistic-gold•16mo ago

what you mean by re-render ?

ambitious-aqua•16mo 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

optimistic-gold•16mo ago

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

ambitious-aqua•16mo ago

yes

optimistic-gold•16mo ago

you can refetch data after any event

ambitious-aqua•16mo ago

How? any hooks ?

optimistic-gold•16mo 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

ambitious-aqua•16mo ago

okay..Thank you