Material-table: Need help in fixing console warning.

Created on 26 Aug 2020  路  10Comments  路  Source: mbrn/material-table

Describe the bug
I am not able to fix this warning in the console. Any solution/idea about the origin of warning is appreciated. Tia

Warning: React does not recognize the `scrollWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `scrollwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in td (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by MTableCell)
    in MTableCell (created by MTableBodyRow)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
    in MTableBodyRow (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 PrizeTable.js:209)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at PrizeTable.js:208)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at PrizeTable.js:175)
    in PrizeTable (at PrizeInfo.js:142)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at PrizeInfo.js:31)
    in PrizeInfo (at CreateContest/index.js:38)
    in Formik (at CreateContest/index.js:141)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at CreateContest/index.js:80)
    in main (at CreateContest/index.js:79)
    in CreateContest (at CreateContest/index.js:250)
    in PrizeListProvider (at CreateContest/index.js:249)
    in CreateContestWithContext (at ContestInfo/index.js:142)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at ContestInfo/index.js:141)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at ContestInfo/index.js:139)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at ContestInfo/index.js:47)
    in div (at ContestInfo/index.js:40)
    in TabPanel (at ContestInfo/index.js:138)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at ContestInfo/index.js:114)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
    in div (created by Transition)
    in Transition (created by ForwardRef(Slide))
    in ForwardRef(Slide) (at ContestInfo/index.js:53)
    in ForwardRef(Transition) (created by Unstable_TrapFocus)
    in Unstable_TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Dialog))
    in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))
    in WithStyles(ForwardRef(Dialog)) (at ContestInfo/index.js:88)
    in div (at ContestInfo/index.js:87)
    in ContestDetail (at UpcomingContests.js:22)
    in Upcoming (at UpcomingContests.js:29)
    in ContestFullInfoProvider (at UpcomingContests.js:28)
    in LiveWithContext (created by Context.Consumer)
    in Route (at DashboardLayout/index.js:66)
    in Switch (at DashboardLayout/index.js:40)
    in div (at DashboardLayout/index.js:34)
    in div (at DashboardLayout/index.js:30)
    in DashboardLayout (created by Context.Consumer)
    in Route (at AuthorizedLayout.js:10)
    in Switch (at AuthorizedLayout.js:9)
    in div (at AuthorizedLayout.js:8)
    in AuthorizedLayout (created by Context.Consumer)
    in Route (at AppLoading.js:19)
    in AppLoading (at AuthorizedRoute.js:17)
    in AuthorizedRoute (at layouts/index.js:15)
    in Switch (at layouts/index.js:13)
    in AuthUserProvider (at layouts/index.js:12)
    in Route (at Router.js:8)
    in Router (created by BrowserRouter)
    in BrowserRouter (at Router.js:7)
    in Router (at layouts/index.js:11)
    in App (at App.js:20)
    in SnackbarProvider (at App.js:19)
    in ThemeProvider (at App.js:17)
    in LayoutProvider (at App.js:16)
    in Provider (at App.js:15)
    in App (at src/index.js:8)
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2273
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
validateProperty$1 @ react-dom.development.js:5549
warnUnknownProperties @ react-dom.development.js:5595
validateProperties$2 @ react-dom.development.js:5619
validatePropertiesInDevelopment @ react-dom.development.js:5662
setInitialProperties @ react-dom.development.js:5941
finalizeInitialChildren @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18978
completeUnitOfWork @ react-dom.development.js:22192
performUnitOfWork @ react-dom.development.js:22165
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(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
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

Code usage

  return (
    <Grid
      item
      xs={12}
      sm={12}
      direction="row"
      justify="space-around"
      alignItems="center"
      container
    >
      <Grid item sm={6}>
        {error && (
          <Alert className={classes.margin} severity="error">
            {error}
          </Alert>
        )}
        {!error && message && (
          <Alert severity="success" className={classes.margin}>
            {message}
          </Alert>
        )}
      </Grid>
      <Grid item sm={6} align={"right"}>
        <Button
          variant="outlined"
          disabled={!values.prizes.length}
          className={classes.margin}
          onClick={() => {
            setOpen(true);
          }}
        >
          Clear Table
        </Button>
      </Grid>
      <Grid item xs={12}>
        <MaterialTable
          title="Prize Distribution"
          columns={columns}
          options={{
            search: false,
            draggable: false,
            paging: false,
          }}
          data={tableData}
          icons={icons}
          editable={{
            onRowAdd: newData => {
              if (errors?.numOfWinners || errors?.prizePool) {
                setFieldTouched("numOfWinners", true);
                setFieldTouched("prizePool", true);
                return Promise.resolve();
              }
              return new Promise(resolve => {
                resolve();
                setTableData(prevState => {
                  const data = [...prevState];
                  data.push(newData);
                  return data;
                });
              });
            },
            onRowUpdate: (newData, oldData) =>
              new Promise(resolve => {
                resolve();
                if (oldData) {
                  setTableData(prevState => {
                    const data = [...prevState];
                    data[data.indexOf(oldData)] = newData;
                    return data;
                  });
                }
              }),
            onRowDelete: oldData =>
              new Promise(resolve => {
                resolve();
                setTableData(prevState => {
                  const data = [...prevState];
                  data.splice(data.indexOf(oldData), 1);
                  return data;
                });
              }),
          }}
        />
      </Grid>
      <AlertDialog
        {...{ open, handleYes, handleNo }}
        message={"Are you sure you want to clear prize table?"}
      />
    </Grid>
  );

Coloumns

const getColumns = (numOfWinners, prizePool) => {
  return [
    {
      title: "From",
      field: "from",
      type: "numeric",
      validate: rowData => {
        return _.isInteger(rowData?.from) && rowData?.from <= numOfWinners;
      },
    },
    {
      title: "To",
      field: "to",
      type: "numeric",
      validate: rowData => {
        return (
          _.isInteger(rowData?.to) &&
          rowData?.to >= rowData?.from &&
          rowData?.to <= numOfWinners
        );
      },
    },
    {
      title: "Prize",
      field: "prize",
      type: "numeric",
      validate: rowData => {
        return _.isInteger(rowData?.prize) && rowData?.prize <= prizePool;
      },
    },
  ];
};

Lib version

"material-table": "^1.69.0",

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

question
Source
picture Ragnar-23
👍3

Most helpful comment

v1.69.1 is just released, finally 馃帀

picture merobal on 2 Oct 2020
👍3 ❤2

All 10 comments

Duplicate of #2357

merobal picture merobal on 26 Aug 2020
👍3

Hi @merobal, could you help?
I'm using "material-table": "^1.69.0", but got the same warning message.

vantoantg picture vantoantg on 27 Aug 2020

The fix is not yet released. See #2369

merobal picture merobal on 27 Aug 2020
👍5

The fix is not yet released. See #2369

When this fix is released?

nvlong198 picture nvlong198 on 18 Sep 2020
👍3

Any solution??

wejrcze picture wejrcze on 20 Sep 2020
👍1

Still waiting for @mbrn to release the fixes

merobal picture merobal on 20 Sep 2020
👍1

Any update on when this is going to be releases?

freenetbrasil picture freenetbrasil on 28 Sep 2020

v1.69.1 is just released, finally 馃帀

merobal picture merobal on 2 Oct 2020
👍3 ❤2

Yes, I run this code: yarn upgrade material-table and works!!

EduardoUstarez picture EduardoUstarez on 6 Oct 2020

Working and no more warning with version v1.69.1

e-hop picture e-hop on 13 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

bohrsty picture bohrsty  路  3Comments
slevy85 picture slevy85  路  3Comments
ModPhoenix picture ModPhoenix  路  3Comments
behrouz-s picture behrouz-s  路  3Comments
lazeebee picture lazeebee  路  3Comments