Runtime Error with react-data-table-component in React Application

Question

I encountered a runtime error while trying to integrate react-data-table-component into my React application. The error seems to occur when I attempt to render the data table after fetching data from my API.

Here's the code I'm using:

import React, { useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import axios from "axios";

const InvitationsDataTable = () => {
  const [tableData, setTableData] = useState([]);

  const columns = [
    { name: "Nomor Undangan", selector: "nomor_undangan", sortable: true },
    { name: "Tanggal", selector: "tanggal", sortable: true },
    { name: "Waktu", selector: "waktu", sortable: true },
    { name: "Tempat", selector: "tempat", sortable: true },
    { name: "Agenda", selector: "agenda", sortable: true },
    { name: "Pemimpin", selector: "leader_name", sortable: true },
    { name: "Peserta", selector: "participants", sortable: true },
    { name: "Dokumen", selector: "documents", sortable: true },
  ];

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:5000/api/invitations");
        const invitations = response.data.map((invitation) => ({
          ...invitation,
          tanggal: new Date(invitation.tanggal).toLocaleDateString(),
          waktu: `${invitation.waktu_mulai} - ${invitation.waktu_selesai}`,
          participants: JSON.parse(invitation.participants)
            .map((p) => p.name)
            .join(", "),
          documents: JSON.parse(invitation.documents)
            .map((d) => d.file_path)
            .join(", "),
        }));
        setTableData(invitations);
      } catch (error) {
        console.error("Error fetching invitations:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <DataTable
      title="Daftar Undangan"
      columns={columns}
      data={tableData}
      pagination
      keyField="invitation_id"
    />
  );
};

export default InvitationsDataTable;

And this is the error I'm encountering:

Uncaught runtime errors:
ERROR
t is not a function
TypeError: t is not a function
    at http://localhost:3000/static/js/bundle.js:68245:56
    ...

Context:

The error appears when I reload the page, and although it sometimes resolves after a second reload, the issue keeps recurring. My goal is to ensure that the data from the API can be accessed and displayed correctly in the data table.

Any suggestions on how to resolve this issue?

Answer 1

Your code doesn't seem to have any problems, but you can troubleshoot it in the following steps:

1. Set data directly using mock data, if there is no problem, check your custom request

let mockData = [{...},{...}];
useEffect(() => {
  setTableData(mocKData)
}, [])

2. Upgrade Node version, reinstall react-data-table-component