Topic: Updating Data in react crashes MDBTable
**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. **
Adding key to that table with the data.length as the key works great.
Mimo service commented 4 years ago
how to add key in the table?
Wojciech Staniszewski staff commented 4 years ago
If there is any problem, please create a new forum thread
<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 5 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 commented 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Piotr Glejzer staff commented 5 years ago
Do you have code to show? I can't help without that.
nbainy commented 5 years ago
Code below.....