Material-table: Materialtable throws error when add new

[geohuz]

I just upgraded to 16.8.0, and I got error after insert a new row and start editing, the error shows:

m-table-edit-row.js:218 Uncaught TypeError: _this2.props.onBulkEditRowChanged is not a function
    at MTableEditRow.<anonymous> (m-table-edit-row.js:218)
    at callCallback (react-dom.development.js:12490)
    at commitUpdateQueue (react-dom.development.js:12511)
    at commitLifeCycles (react-dom.development.js:19858)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at flushPendingDiscreteUpdates (react-dom.development.js:21847)
    at flushDiscreteUpdates (react-dom.development.js:21827)
    at finishEventHandler (react-dom.development.js:764)
    at batchedEventUpdates (react-dom.development.js:798)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)
(anonymous) @ m-table-edit-row.js:218
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19858
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPendingDiscreteUpdates @ react-dom.development.js:21847
flushDiscreteUpdates @ react-dom.development.js:21827
finishEventHandler @ react-dom.development.js:764
batchedEventUpdates @ react-dom.development.js:798
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 The above error occurred in the <MTableEditRow> component:
    in MTableEditRow (created by MTableBody)
    in tbody (created by ForwardRef(TableBody))
    in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
    in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
    in MTableBody (created by Droppable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in Droppable (created by ConnectFunction)
    in ConnectFunction
    in ConnectFunction (created by MaterialTable)
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at Dept.js:11)
    in Dept (at AppFrame.js:198)
    in Route (at AppFrame.js:202)
    in Switch (at AppFrame.js:194)
    in main (at AppFrame.js:188)
    in div (at AppFrame.js:94)
    in AppFrame (created by Context.Consumer)
    in Route (at AuthenticatedRoute.js:11)
    in RouteAuthenticated (at Main.js:11)
    in Switch (at Main.js:9)
    in Main (at src/index.js:16)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:15)
    in StoreProvider (at src/index.js:13)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
callback @ react-dom.development.js:20744
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19858
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPendingDiscreteUpdates @ react-dom.development.js:21847
flushDiscreteUpdates @ react-dom.development.js:21827
finishEventHandler @ react-dom.development.js:764
batchedEventUpdates @ react-dom.development.js:798
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 4 more frames
m-table-edit-row.js:218 Uncaught TypeError: _this2.props.onBulkEditRowChanged is not a function
    at MTableEditRow.<anonymous> (m-table-edit-row.js:218)
    at callCallback (react-dom.development.js:12490)
    at commitUpdateQueue (react-dom.development.js:12511)
    at commitLifeCycles (react-dom.development.js:19858)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at flushPendingDiscreteUpdates (react-dom.development.js:21847)
    at flushDiscreteUpdates (react-dom.development.js:21827)
    at finishEventHandler (react-dom.development.js:764)
    at batchedEventUpdates (react-dom.development.js:798)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)
(anonymous) @ m-table-edit-row.js:218
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19858
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPendingDiscreteUpdates @ react-dom.development.js:21847
flushDiscreteUpdates @ react-dom.development.js:21827
finishEventHandler @ react-dom.development.js:764
batchedEventUpdates @ react-dom.development.js:798
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 The above error occurred in the <ErrorBoundary> component:
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at Dept.js:11)
    in Dept (at AppFrame.js:198)
    in Route (at AppFrame.js:197)
    in Switch (at AppFrame.js:194)
    in main (at AppFrame.js:188)
    in div (at AppFrame.js:94)
    in AppFrame (created by Context.Consumer)
    in Route (at AuthenticatedRoute.js:11)
    in RouteAuthenticated (at Main.js:11)
    in Switch (at Main.js:9)
    in Main (at src/index.js:16)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:15)
    in StoreProvider (at src/index.js:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPendingDiscreteUpdates @ react-dom.development.js:21847
flushDiscreteUpdates @ react-dom.development.js:21827
finishEventHandler @ react-dom.development.js:764
batchedEventUpdates @ react-dom.development.js:798
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 4 more frames
m-table-edit-row.js:218 Uncaught TypeError: _this2.props.onBulkEditRowChanged is not a function
    at MTableEditRow.<anonymous> (m-table-edit-row.js:218)
    at callCallback (react-dom.development.js:12490)
    at commitUpdateQueue (react-dom.development.js:12511)
    at commitLifeCycles (react-dom.development.js:19858)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at flushPendingDiscreteUpdates (react-dom.development.js:21847)
    at flushDiscreteUpdates (react-dom.development.js:21827)
    at finishEventHandler (react-dom.development.js:764)
    at batchedEventUpdates (react-dom.development.js:798)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)
(anonymous) @ m-table-edit-row.js:218
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19858
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPendingDiscreteUpdates @ react-dom.development.js:21847
flushDiscreteUpdates @ react-dom.development.js:21827
finishEventHandler @ react-dom.development.js:764
batchedEventUpdates @ react-dom.development.js:798
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

And here is my simple table for editing data:

import React, { useEffect } from 'react'
import MaterialTable from 'material-table'
import tableIcons from './materialTableIcons'
import {localization} from './materialTableLocale'
import { APIEnd } from './api'

export default function Dept(props) {
  const [tableData, setTableData] = React.useState([])

  return (
    <MaterialTable
      editable={{
        onRowAdd: newData => 
          APIEnd.post('/depts', {
            name: newData.name,
            is_proj: newData.is_proj
          }),
        onRowUpdate: newData => 
          APIEnd.patch(`/depts?id=eq.${newData.id}`, {
            name: newData.name
          })
      }}
      localization={localization}
      icons={tableIcons}
      columns = {[
        {title: 'department', field: 'name'},
        {title: 'project', field: 'is_proj', render: row=> 
          row.is_proj? 'project' : 'department'
        }
      ]}
      data = {()=> 
        APIEnd.get(`/depts`, {
          headers: {
            'Prefer': 'count=exact'
          }
        })
        .then(res=> {
          return ({
            data: res.data,
            page: 0,
            totalCount: parseInt(res.headers["content-range"].split("/")[1])
          })
        })}
    />
  )
}

I don't need buldUpdate so there is no onBulkUpdate event handler. My previous version is 15.9 and it worked perfect at before.

[ChristianMarca]

Hi @geohuz, this issue is already open on https://github.com/mbrn/material-table/issues/2269

[JGabrielGruber]

This issue is already open on #2269

Hey, sorry, but, that issue is closed and the problem still persists....

[ChristianMarca]

This issue is already open on #2269

Hey, sorry, but, that issue is closed and the problem still persists....

Yep, and the thing is that doesn't exist an open PR or something to fix the issue, just the people mention a downgrade option but it removes the bulk update feature 😞

[ChristianMarca]

@JGabrielGruber this looks good, with this approach while the PR is on a review you can use something tile that and It should work

EditRow: (tableProps) => {
        return (
          <MTableEditRow
            {...{
              ...tableProps,
              onBulkEditRowChanged:
                typeof tableProps.onBulkEditRowChanged === 'function' ? tableProps.onBulkEditRowChanged : () => {},
            }}
          />
        );
      }

[bjj951]

If you also want bulk update to work, this was my workaround
EditRow: (tableProps) => { return ( <MTableEditRow {...{ ...tableProps, onBulkEditRowChanged: (oldData, newData) => { if (tableProps.onBulkEditRowChanged){ tableProps.onBulkEditRowChanged(oldData, newData); } }, }} /> ); }