I am trying to fetch data from an API. I am getting data in the following format.
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'}}
]
Below I have implemented the Data grid and tried to import data from API into this data grid.
const columns = [ { field: 'id', headerName: "ID" }, { field: "type", headerName: "TYPE" }];
const Dashboard = () => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
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>
);
};
This is the error poping up into my console log. Nothing is appearing in the data grid(frontend side) Help needed. Thank you in advance.
I tried changing the data into different formats but it was not working.