Fetching data from API and Displaying response data into a Data grid

Question

Error trying to fetch data from an API which is then passed to a DataGrid.

The data is returned as follows:

{
  data: [{
      type: 'PropertyDamage',
      id: '100',
      attributes: {
        identification_number: '3931',
        damage_date: '2021-04-29',
        report_date: '2021-06-26'
      }
    },
    {
      type: 'PropertyDamage',
      id: '101',
      attributes: {
        identification_number: '3839',
        damage_date: '2021-01-21',
        report_date: '2021-08-25'
      }
    },
    {
      type: 'PropertyDamage',
      id: '102',
      attributes: {
        identification_number: '3735',
        damage_date: '2021-04-25',
        report_date: '2021-10-29'
      }
    }
  ]
}

The component that is handling the fetching of data as well as rendering the DataGrid:

const columns = [
  { field: "id", headerName: "ID" },
  { field: "type", headerName: "TYPE" },
];

const Dashboard = () => {

  const [propertydamages, setPropertyDamages] = useState([]);

  useEffect(() => {
    const url = "URL";
    fetch(url, {
      method: "GET",
      withCredentials: true,
      headers: {
        "X-API-Key": "API Key",
      },
    })
      .then((response) => response.json())
      .then((json) => {
        setPropertyDamages(json);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  return (
    <Box m="20px">
      {/* Data Grid */}
      <DataGrid rows={propertydamages} columns={columns} />
    </Box>
  );
};

The error being logged to the console on render:

index.js:1272 Warning: Failed prop type: Invalid prop `rows` of type `object` supplied to `ForwardRef(DataGrid)`, expected an array.
        at div
        at http://localhost:3000/static/js/0.chunk.js:942:73
        at Box (http://localhost:3000/static/js/0.chunk.js:69597:74)
        at div
        at http://localhost:3000/static/js/0.chunk.js:942:73
        at Box (http://localhost:3000/static/js/0.chunk.js:69597:74)
        at Dashboard (http://localhost:3000/static/js/main.chunk.js:373:77)
        at RenderedRoute (http://localhost:3000/static/js/0.chunk.js:153998:27)
        at Routes (http://localhost:3000/static/js/0.chunk.js:154437:24)
        at main
        at div
        at InnerThemeProvider (http://localhost:3000/static/js/0.chunk.js:68080:72)
        at ThemeProvider (http://localhost:3000/static/js/0.chunk.js:67042:24)
        at ThemeProvider (http://localhost:3000/static/js/0.chunk.js:68098:24)
        at App (http://localhost:3000/static/js/main.chunk.js:51:72)
        at Router (http://localhost:3000/static/js/0.chunk.js:154367:30)
        at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:152656:23)

I tried changing the data into different formats but it was not working.

Check your placing of the useEffect dependency array. To me it looks like it's in the wrong place. It should come after the next { . useEffect(( )=>{},[]) . You may be in an infinite loop — Ryan Zeelie
– Ryan Zeelie, Commented Dec 14, 2022 at 14:03
Based on your update, the answer is here type object supplied to ForwardRef(DataGrid), expected an array. Best to check that your data is an array and not something like {results:[//data]} — Ryan Zeelie
– Ryan Zeelie, Commented Dec 14, 2022 at 14:18
@RyanZeelie Yes, It was running in an infinite loop. I changed the positioning of the useEffect dependency array. Thank you for your help. But still data is not appearing in the data grid — Omkar Biradar
– Omkar Biradar, Commented Dec 14, 2022 at 14:29
@evolutionxbox index.js:1272 Warning: Failed prop type: Invalid prop rows of type object supplied to ForwardRef(DataGrid), expected an array. This is the error — Omkar Biradar
– Omkar Biradar, Commented Dec 14, 2022 at 14:31

Ryan Zeelie · Accepted Answer · 2022-12-15 15:04:52Z

1

For those coming across this post. The MUI DataGrid takes an array of objects in the rows prop

<DataGrid rows={propertydamages} columns={columns} />

Setting this prop to null undefined or an object will result in an error and your component will not render. If you are using state to populate the rows, be sure that the initial value is an empty array [] and that the data being receieved is in fact going to be an array. How you do your checks is up to you but I would highly recommend that the state does not get updated unless the update is going to result in an array

edited Dec 15, 2022 at 15:04

answered Dec 14, 2022 at 14:11

Ryan Zeelie

1,5307 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moyosore Ogunleye · Accepted Answer · 2025-05-14 09:31:46Z

-1

Try using the spread operator to make your response from the API an Array into propertyDamages (setPropertyDamages([...json])

answered May 14 at 9:31

Moyosore Ogunleye

194 bronze badges

1 Comment

AztecCodes May 14 at 19:18

Please add supporting information to your answer to make it more clear and understandable. Also please format code properly. Thank you!

Collectives™ on Stack Overflow

Fetching data from API and Displaying response data into a Data grid

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related