Good day! I was wondering why I didnt display data on my grid table eventhough I can see or received data from my api response, I just wondering whats wrong on my code. here is my current code and please see my return data below, thanks

const UserModule = () => {

  const logHeader = [
    { field: 'id', headerAlign: 'left', headerName: 'ID', hide: true, width: 50 },
    { field: 'firstname', headerAlign: 'left', headerName: 'First Name', width: 130 },
    { field: 'lastname', headerAlign: 'left', headerName: 'Last Name', sortable: true, width: 110 },
    { field: 'status', headerAlign: 'left', headerName: 'Status', width: 80 },

  ]


  const [transactionLogData, setTransactionLogData] = useState([]);

  useEffect(() => {

    WorkflowApi.getTransactionLogForRevenueOfficer().then(logs => {

        const newLogs = Object.fromEntries(Object.entries(logs).map( ([k,v]) =>  {
              return [k, {
                ...v,
                id: v._id
              }] // I think the problem is here
        }))  
        console.log("newLogs: ", newLogs)
        setTransactionLogData(newLogs)
    })

  })
  ....
return (
  <Grid item xs={12}>
        <Box ref={ponentRef}>
             <RecordTable
                  columns={logHeader}
                  rows={transactionLogData}>
             </RecordTable>
         </Box>
  </Grid>
  )
}

//RecordTable.js

const RecordTable = (props) => {

    const { columns, rows } = props

    useEffect(async () => {

    }, [rows])

//This type of array did my RecordTable ponent expects

// const sampleRows = [
//     {
//       "_id": 458,
//       "LastUpdateDate": "2022-02-10",
//       "status": "Approved",
//       "firstname": "Yuno",
//       "lastname": "Santiago",
//       "id": 458
//     }
// ]
    return(
            <DataGrid
                ....
                columns={columns}
                rows={rows}
                ....
            />
    )
}

response i received from my api

{
    "_id": 458,
    "LastUpdateDate": "2022-02-10",
    "status": "Approved",
    "firstname": "Yuno",
    "lastname": "Santiago",
    "id": 458
}

this is the error i get

Warning: Failed prop type: Invalid prop rows of type object supplied to ForwardRef(DataGrid), expected array.`

Update after i remove the Object.fromEntries

const newLogs = Object.entries(logs).map( ([k,v]) =>  {
                  return [k, {
                    ...v,
                    id: v._id
                  }] // I think the problem is here
            })

i received this error

Uncaught Error: MUI: The data grid ponent requires all rows to have a unique id property.

Good day! I was wondering why I didnt display data on my grid table eventhough I can see or received data from my api response, I just wondering whats wrong on my code. here is my current code and please see my return data below, thanks

const UserModule = () => {

  const logHeader = [
    { field: 'id', headerAlign: 'left', headerName: 'ID', hide: true, width: 50 },
    { field: 'firstname', headerAlign: 'left', headerName: 'First Name', width: 130 },
    { field: 'lastname', headerAlign: 'left', headerName: 'Last Name', sortable: true, width: 110 },
    { field: 'status', headerAlign: 'left', headerName: 'Status', width: 80 },

  ]


  const [transactionLogData, setTransactionLogData] = useState([]);

  useEffect(() => {

    WorkflowApi.getTransactionLogForRevenueOfficer().then(logs => {

        const newLogs = Object.fromEntries(Object.entries(logs).map( ([k,v]) =>  {
              return [k, {
                ...v,
                id: v._id
              }] // I think the problem is here
        }))  
        console.log("newLogs: ", newLogs)
        setTransactionLogData(newLogs)
    })

  })
  ....
return (
  <Grid item xs={12}>
        <Box ref={ponentRef}>
             <RecordTable
                  columns={logHeader}
                  rows={transactionLogData}>
             </RecordTable>
         </Box>
  </Grid>
  )
}

//RecordTable.js

const RecordTable = (props) => {

    const { columns, rows } = props

    useEffect(async () => {

    }, [rows])

//This type of array did my RecordTable ponent expects

// const sampleRows = [
//     {
//       "_id": 458,
//       "LastUpdateDate": "2022-02-10",
//       "status": "Approved",
//       "firstname": "Yuno",
//       "lastname": "Santiago",
//       "id": 458
//     }
// ]
    return(
            <DataGrid
                ....
                columns={columns}
                rows={rows}
                ....
            />
    )
}

response i received from my api

{
    "_id": 458,
    "LastUpdateDate": "2022-02-10",
    "status": "Approved",
    "firstname": "Yuno",
    "lastname": "Santiago",
    "id": 458
}

this is the error i get

Warning: Failed prop type: Invalid prop rows of type object supplied to ForwardRef(DataGrid), expected array.`

Update after i remove the Object.fromEntries

const newLogs = Object.entries(logs).map( ([k,v]) =>  {
                  return [k, {
                    ...v,
                    id: v._id
                  }] // I think the problem is here
            })

i received this error

Uncaught Error: MUI: The data grid ponent requires all rows to have a unique id property.

• javascript
• reactjs
• node.js
• material-ui

Share Improve this question Follow edited Mar 26 at 8:34 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Jul 6, 2022 at 23:44 YunoYuno 11122 silver badges1313 bronze badges 2

• The API is sending an object not an array, as array must be between [ ] – Paulo Fernando Commented Jul 7, 2022 at 0:16
• can you please help me with this? @PauloFernando – Yuno Commented Jul 7, 2022 at 0:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

DataGrid from MUI requires rows to be an array of objects, each with a unique id field.

Make sure your API response is indeed an array. If not, and it's just a single object, wrap it in an array like so:

const newLogs = [{  ...logs,  id: logs._id}]

check your rows props, it highly possible is empty object at first render. To do so, you just console.log({rows}) and see the value printed in browser

I believe the problem is in the Object.fromEntries, the result of this method is always an object, not an array. Try to remove the Object.fromEntries, and leave only the Object.entries

For me, the problem is that I put the column content in another file. I just put it in the app ponent and it solves the problem.

It creates an object if the column is in another file, try to put your recordtable ponent in the same ponent(userModule I guess)