Data fetched is not showing on the material ui table

Question

My data is not showing on the console and as well as the table, the status of api call seems to be fine, data is shown in network, but when I console.log it, its not showing the array and there is also a bug that my data is not array, but when I checked it is an array data. Main error seems to be in the table mapping.

This image shows the data present in the api:

I tried debugging it, it says my data is not an array, I need a solution to this and I want it to display on my table.

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: { token: bearer
        });
        const data = await response.json();
        const mappedData = data.map(({ id, device_name, OEM, sdk_version, deviceKey, valid_upto }) =>
          createData(id, device_name, OEM, sdk_version, deviceKey, valid_upto)
        );
        setRows(mappedData);
      } catch (error) {
        console.log(error);
      }
    };
   
    fetchData();
  }, []);

Answer 1

instead of data.map try data.data.map because your data seems to be an object not an array.

Or change

const data = await response.json()

To

const res = await response.json()

So you have something like

const res = await response.json()
const mappedData = res.data.map(({ id, device_name, OEM, sdk_version, deviceKey, valid_upto }) =>
          createData(id, device_name, OEM, sdk_version, deviceKey, valid_upto)
        );