Can't fetch data to mui datagrid:Failed prop type: Invalid prop `rows` of type `function` supplied to `ForwardRef(DataGrid)`, expected an array

Question

I'm making a project and I'm getting following error on console. I have a mui datagrid which is connected to my spring boot fetch API. But no data reflects on to datagrid.

My api response is this:

[
  {
    "id": 1,
    "brandName": "Mercedes"
  }
]

And my front end looks like this:

export const CarManagement = () => {
     const CarModelData = () => {
        const [carModelData, setCarModelData] = useState([]);
        const [error, setError] = useState(null);
        useEffect(() => {
            axios
              .get("http://localhost:8080/getAllCarBrands")
              .then((res) => setCarModelData(res.data))
              .catch(err => {
               setError(err.message);
          });
          }, [])


    }
     
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
  const columns = [
    { field: "id", headerName: "ID" },

    {
      field: "brandName",
      headerName: "Brand Name",
    },


  ];

  return (
    <Box m="20px">
      <Header title="CAR BRANDS" subtitle="List of car brands." />
      <Box
        m="40px 0 0 0"
        height="75vh"
        sx={{
          "& .MuiDataGrid-root": {
            border: "none",
          },
          "& .MuiDataGrid-cell": {
            borderBottom: "none",
          },
          "& .name-column--cell": {
            color: colors.greenAccent[300],
          },
          "& .MuiDataGrid-columnHeaders": {
            backgroundColor: colors.blueAccent[700],
            borderBottom: "none",
          },
          "& .MuiDataGrid-virtualScroller": {
            backgroundColor: colors.primary[400],
          },
          "& .MuiDataGrid-footerContainer": {
            borderTop: "none",
            backgroundColor: colors.blueAccent[700],
          },
          "& .MuiCheckbox-root": {
            color: `${colors.greenAccent[200]} !important`,
          },
        }}
      >
        <DataGrid checkboxSelection rows={CarModelData} columns={columns} />
      </Box>
    </Box>
  );
};

export default CarManagement;

I tried to fetch my API in different ways instead of Axios. But nothings changed.

Answer 1

Can be from multiple things, but you can check those:

It appears that you've defined a function CarModelData, but you're not actually calling it to fetch the data. You should call this function to fetch data and populate the carModelData state:

const CarManagement = () => {
  const [carModelData, setCarModelData] = useState([]);
  const [error, setError] = useState(null);

  const fetchCarModelData = () => {
    axios
      .get("http://localhost:8080/getAllCarBrands")
      .then((res) => setCarModelData(res.data))
      .catch((err) => {
        setError(err.message);
      });
  };

  useEffect(() => {
    fetchCarModelData(); // Call the fetch function
  }, []);
};

In the <DataGrid /> component, you are passing CarModelData as the rows property. This should be an array of data, not a function. You should pass carModelData as the rows property.

<DataGrid checkboxSelection rows={carModelData} columns={columns} />

Also make sure that your API endpoint is accessible and returning the expected data, check it with some console.log to see what you retrive from it.