Question 188052 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React – redirect page to show data modifications?

I am not a React user but have a question about how an HTML table is normally refreshed after record operations such as UPDATE, DELETE or CREATE. For example, we may have a table like this:

[New Record]
John    [email protected]   [Edit] [Delete]
Jane    [email protected]   [Edit] [Delete]

If the ‘Edit’ button is pressed, a dialog with a form appears that allows you to modify that record. When saved, how do you update the table? I don’t need to see code, I’d just like to know what most people do.

I saw a React video where the developer redirected to the page like this:

const navigate = useNavigate();
...
navigate(‘/’);

To me, this seems simple and effective but a waste of resources because you rebuild the whole page.

My questions:

  1. Is this the popular way to handle this situation in React?
  2. How about writing some code and rebuilding the table but not the whole page?
  3. How about writing some code that updates the specific row?

The first option seems to be the easiest approach by far since you don’t have to write any extra code. The second option seems to take a little extra code but more resource friendly. The third option takes the most developer effort but this would only target the specific row, e.g. delete or update it.

I would just like to hear your thoughts on this, thank you.

Tags:

2

Answers


  1. 0

    1.- No, it is only a way to do that but not the only one, you can refresh the table without any redirection

    2.- Yes it is possible, the table is linked to a state (table data), once the state is updated the whole table will change

    3.- Each edit and delete has to have a handler (click) which you pass the id (id of the specific registration/record that you get when populate the table) and update the table data state with that id, once you trigger that state change the table in the UI will update too

    Hope it helps

    Login or Signup to reply.
  2. 0

    you create a state to hold the table data and another boolean state to control the ui.
    when the user clicks on the button to add a new record you toggle your second state so the component rerender and based on this state, in the JSX, you decide either to show the table or the form where you can add a new record.
    then when you add the record you update the table state of course and also toggle the other state so the component rerenders and the updated table is displayed in the ui.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search