Topic: Updating Data in react crashes MDBTable

nbainy free asked 2 years ago


**I have a table of multiple columns that represent a subscription, one of the columns is a Enum that is status of the subscription. I've added a filter that basically goes through a switch and filters data base on that.

For Some reason when I try filtering the data that i'm rendering to one one of the 3 statuses that are not active it crashes, I'm expecting to filter the data and rerender correctly.**

**The react app crashes with this error -->

react-dom.production.min.js:125 TypeError: Cannot convert undefined or null to object at Function.keys () at vendors.bundle.js:6 at Array.map () at t.value (vendors.bundle.js:6) at Ie (react-dom.production.min.js:104) at rh (react-dom.production.min.js:103) at zj (react-dom.production.min.js:228) at Th (react-dom.production.min.js:152) at tj (react-dom.production.min.js:152) at Te (react-dom.production.min.js:146) Me @ react-dom.production.min.js:125 react-dom.production.min.js:61 Uncaught TypeError: Cannot convert undefined or null to object at Function.keys () at vendors.bundle.js:6 at Array.map () at t.value (vendors.bundle.js:6) at Ie (react-dom.production.min.js:104) at rh (react-dom.production.min.js:103) at zj (react-dom.production.min.js:228) at Th (react-dom.production.min.js:152) at tj (react-dom.production.min.js:152) at Te (react-dom.production.min.js:146)

if I change the entries that I'm viewing to 100 which is more all that all I have this doesn't happen. **


Piotr Glejzer staff commented 2 years ago

Do you have code to show? I can't help without that.


nbainy free commented 2 years ago

Code below.....


nbainy free answered 2 years ago


Adding key to that table with the data.length as the key works great.


Mimo service free commented 1 year ago

how to add key in the table?


Wojciech Staniszewski staff commented 1 year ago

If there is any problem, please create a new forum thread


nbainy free answered 2 years ago


<MDBDataTable
                        striped
                        bordered
                        hover
                        noBottomColumns
                        data={{
                            columns: [
                                {
                                    label: "Invoice Id",
                                    field: "invoiceId",
                                    sort: "asc",
                                },
                                {
                                    label: "Amount",
                                    field: "amount",
                                    sort: "asc",
                                },
                                {
                                    label: "Date Created",
                                    field: "dateCreated",
                                    sort: "asc",
                                },
                                {
                                    field: "view",
                                    searchable: false,
                                    width: 75,
                                },
                            ],
                            rows: subscriptionOrders.map((order) => ({
                                invoiceId: order.orderId,
                                amount: order.amount,
                                dateCreated: new Date(order.dateCreated).toLocaleDateString(),
                                view: <a href={order.invoiceUrl} target="_blank" className="text-center d-block mx-auto text-secondary w-100" data-testid="rename">

                                    <i className="fas fa-eye" />
                                </a>,
                            })),
                        }}
                    />

Piotr Glejzer staff commented 2 years ago

I don't know what you have in subscptionOrders array but I think if error about keys is empty that maybe is a problem with that. I will check this with dummy data because I'm doing refactor at the moment so if it's a problem with that I will try to fix that as soon as possible.


nbainy free commented 2 years ago

So the problem happens exactly when we filter on an entity on the object which is status then it crashes. But if the table is set to 100 entities to view then it works fine. I'm not sure if it's a problem with paging and the table not being able to preform componentDidUpdate



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.6
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags