Bug: switching tables in the CRUD page leaves blank rows from the previous table

Open Beginner friendly
  • Is something wrong?
#98 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react
Domain
frontend

Research direction

Start in frontend/crud-react/src/App.jsx, focusing on the row loading effect, reloadRows(), and the table rendering around line 427. Keep fetched rows associated with their table, show a loading state until that table's rows arrive, and check table switching plus add, edit, and delete flows. Done means each table shows only its own rows, late reloads do not replace the selected table's data, and the duplicate key warning is gone.

Written by the indexing model from the issue text.

Description

bug frontend help wanted High Priority

On the React CRUD page (frontend/crud-react), switching from a table with rows to another table can leave blank rows behind. For example, open audit_log, then switch to app_user. The real users show, followed by dozens of blank rows whose only value is an ID like 2225. The blank rows stay on every table you switch to next (device, vendor, ...) until you open a table with no rows, which clears them. They aren't in the database: they're left on the page by React.

How to reproduce

  • Run .\dev crud and start the React page.
  • Open audit_log (it needs several entries written by the same user, so running multiple scans can populate this).
  • Switch to app_user: blank rows show under the real users, each with user_id 2225 or 2226.
  • Switch to device: the blank rows are still there, now under device_id.
  • Switch to a table with no rows (i.e. alert_setting), then back: the page is correct again.

Why it happens

  • tableName changes the moment a table is picked, but rows changes only when the fetch in useEffect returns. For one render the page draws the new table's columns over the old table's rows.
  • Each row's React key is row[table.primary_key] (App.jsx line 427). On that render it reads the new table's ID column from the old rows, e.g. user_id on audit-log rows, and many old rows share the same value.
  • React needs keys to be unique. With duplicate keys it can't match old rows to new ones, so it leaves the extra rows on the page and stops tracking them. Each table switch repeats this, so the leftover rows carry on.
  • A table with no rows draws "No rows in ..." instead of the <table>, which removes the whole table element, leftover rows included. That's why an empty table fixes it.
  • The same mix-up can happen after adding or deleting a row: reloadRows() saves whatever it fetched, even if the user has switched tables in the meantime.

Fix (frontend/crud-react/src/App.jsx only)

  • Keep the rows together with the table they came from: replace const [rows, setRows] = useState([]) with const [loaded, setLoaded] = useState({ table: "", rows: [] }).
  • Show rows only when they belong to the selected table:
    const rowsReady = loaded.table === tableName;
    const rows = rowsReady ? loaded.rows : [];
  • The loading effect saves setLoaded({ table: tableName, rows: rowData }).
  • reloadRows() remembers which table it fetched for and saves { table: name, rows }. A reload that finishes after a table switch is then ignored.
  • While the rows for the selected table are loading, show "Loading rows..." instead of "No rows in ...", so a table doesn't briefly claim to be empty.

Why not something else

  • Use the row's position in the list as the key. That would hide the leftover rows, but the page would still briefly draw rows under the wrong columns, and React's guidance is to use stable IDs for keys.
  • Call setRows([]) at the start of the effect. The effect runs after the render that mixes the tables, so the duplicate keys still happen once.

Done when

  • Switching between any tables in any order shows only that table's rows, with no blank leftover rows.
  • Switching straight from audit_log to app_user shows only the real users.
  • "Loading rows..." shows while a table's rows are on the way; "No rows in X." only for a table that's empty.
  • Adding, editing and deleting rows still refreshes the list.
  • Adding a row and switching tables before the refresh returns leaves the new table's rows on screen.
  • No "Encountered two children with the same key" warning in the browser console (F12) while switching tables.

Milestone: M6. Related: #82 (CRUD pagination changes the same file).

Dominant language
Python
Stars
1
Forks
1
Avg merge
8h 51m
Merged PRs (30d)
39

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Bearkat-Professionals/Software-Engineering-Project

All issues in Bearkat-Professionals/Software-Engineering-Project

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.