Material-table: Failed prop type: Invalid prop `children` supplied to `ForwardRef(TableCell)`, expected a ReactNode.

[pan1982]

Hey, i have a strange problem.
this error (in title) appears on component second render after set state.

Which code should i show you to clear my question?

`
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Grid, MuiThemeProvider } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core/styles';
import MaterialTable from "material-table";
import { Button, Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
import commands from '../../../actions/dataTable/commands';

function Marketplaces (props) {
const {marketplaces, getMarketPlaces} = props;
const [multiselection, setMultiselection] = useState(false);

const tableRef = React.createRef();


useEffect(() => {
    getMarketPlaces();
}, []);

const handleEditClick = () => {
  setMultiselection(!multiselection);
};

const columns = marketplaces && [
    ...Object.keys(marketplaces[0]),
].map(col => ({
    title: col.toUpperCase(),
    field:col,
  }));

  let direction = 'ltr';
  // direction = 'rtl';

  const theme = createMuiTheme({
    direction: direction,
    palette: {
      type: 'light'
    }
  });
return (
    !!marketplaces ? 
    (<MuiThemeProvider theme={theme}>
      <div style={{ maxWidth: '100%', direction }}>
        <Grid container>
          <Grid item xs={12}>
            <MaterialTable
              tableRef={tableRef}
              columns={columns}
              data={marketplaces}
              editable={{
                onRowAdd: newData =>
                  new Promise(resolve => {
                    setTimeout(() => {
                    //   resolve();
                    //   const data = [...state.data];
                    //   data.push(newData);
                    //   setState({ ...state, data });
                    }, 600);
                  }),
                onRowUpdate: (newData, oldData) =>
                  new Promise(resolve => {
                    setTimeout(() => {
                      resolve();
                    //   const data = [...data];
                    //   data[data.indexOf(oldData)] = newData;
                    //   setState({ ...state, data });
                    }, 600);
                  }),
                onRowDelete: oldData =>
                  new Promise(resolve => {
                    setTimeout(() => {
                    //   resolve();
                    //   const data = [...state.data];
                    //   data.splice(data.indexOf(oldData), 1);
                    //   setState({ ...state, data });
                    }, 600);
                  }),
              }}
              actions={[
                {
                  icon: 'list_alt',
                  tooltip: 'Select multiple',
                  isFreeAction: true,
                  onClick: (event, rowData) => {
                    handleEditClick();
                  }
                }
              ]}
              title="Demo Title"
              options={{
                selection: multiselection,
                filtering: true,
                exportButton: true,
              }}
              onSearchChange={(e) => console.log("search changed: " + e)}
              onColumnDragged={(oldPos, newPos) => console.log("Dropped column from " + oldPos + " to position " + newPos)}
            />
          </Grid>
        </Grid>
      </div>
    </MuiThemeProvider>)
  :
  (<div/>)
);

}

const mapState = state => {
const { marketplaces } = state.tables;
return { marketplaces };
}

const mapDispatch = dispatch => ({
getMarketPlaces: () => { dispatch(commands.getMarketplaces())},
});

export default connect(mapState, mapDispatch)(Marketplaces);
`

[brunomptorres]

I'm actually getting this error as well

[ronaiza-cardoso]

I'm having the same issue

[pan1982]

Found solution.
So, if your data have 'id' key, please rename it or remove it, cos MT doesn't like this field in data.
Dont know why

Objects are not valid as a React child (found: object with keys {id}).

[codinglabsdev]

Found solution.
So, if your data have 'id' key, please rename it or remove it, cos MT doesn't like this field in data.
Dont know why

Objects are not valid as a React child (found: object with keys {id}).

Actually, it's not the 'id' key, but a nested object. Somewhere in your data there is a property that is an object and has an id in it. I was having the same error, with 3 properties but with keys secure_id and language.

[Miles-Garnsey]

I am also having this issue. Perversely, it appears to have something to do with the fact that material-table actually adds its own tableData object to the array of rows, containing an id. I can't understand where the issue arises however, as my rows array contains no id related columns and the internally generated object (containing tabledata) is never passed back to material-table via props.

Despite this, it appears to cause a complete crash of the application whenever the component is re-rendered. Does anyone have any advice to save me here? This issue is pretty horrendous.

[masbaehr]

Hi i've noticed in my case the issue was that the tableData had boolean field values, which caused the error. This can be avoided by doing this or setting the render parameter for the columns. You will quickly see what column is causing the problem, when it is being rendered as empty!

for(var tdata of dataArray){
      for(var tdatakey of Object.keys(tdata)){

        if(tdata[tdatakey] === true){
          tdata[tdatakey] = "true";
        }
        if(tdata[tdatakey] === false){
          tdata[tdatakey] = "false";
        }
      }
    }

[jpcardoso89]

Thanks, I had the same error here and your solution saved me.

[TekTexNavy]

Is anybody else generating their data with faker js when running into this?

I still don't know the root cause as none of the values in my object were an object themselves. However, I was able to solve the problem by stringify'ing the object then parsing it back to a javascript object. Here's the snippet:
const rows = JSON.parse(JSON.stringify(newEntries));

And just in case it's any help, you can check the type:
rows.forEach(row => { Object.keys(row).map(key => { if (typeof row[key] === Object) { console.log(${key} is an object with value ${row[key]}); } else { console.log(${key} is good); } }); })

[gtrifidis]

I didn't encounter the "id" problem, but one of my fields was a Date object.
Once I set correctly the column type, MT was happy enough to render the updated data.

[Steviebaa]

Well that sucked. Turned out that i was feeding the data directly from the React state. Seems that material-table adds an object to each row tableData: { id: _ } so it was directly modifying the state! The initial load would work, but when the input was changed it called a fetch and updated the data, there was this extra object in each row that was causing the error. Fixed by cloning the tableData object before feeding it into the table.

This might help someone debug, a modified version of the code TekTexNavy posted. Good luck, may the coding gods be in your favour.

rowData.forEach(row => {
        Object.keys(row).map(key => {
            console.log(typeof row[key])
            console.log(typeof row[key] === 'string')

            if (typeof row[key] !== 'string') {
                console.log(`${key} is an object with value ${row[key]}`);
                console.log(`BBBBAAAAAAAADDDDDDDDDDD`);
            }
            console.log(`ROW  ${JSON.stringify(row,null,2)}`);
        });
    }) 

[carllau999]

I had the same issue as mentioned by @Steviebaa and @Miles-Garnsey .

I fixed it by setting data={JSON.parse(JSON.stringify(tableData))}

[minhna]

Found solution.
So, if your data have 'id' key, please rename it or remove it, cos MT doesn't like this field in data.
Dont know why

Objects are not valid as a React child (found: object with keys {id}).

Actually, it's not the 'id' key, but a nested object. Somewhere in your data there is a property that is an object and has an id in it. I was having the same error, with 3 properties but with keys secure_id and language.

That's my case. I tried to print out a Date object.
Thank you.