Show Error "Pt.slice is not a function" in react data table component in datatable with API

Question

I am creating a React demo and showing an error in react-data-table-component in datatable. please review the below code and share your comments.

Show Error "Pt.slice is not a function" in react data table component in datatable with API Image: https://prnt.sc/cpv_cFAlq5SD

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

export default function TableData() {
  const [loadingData, setLoadingData] = useState(true);
  const columns = useMemo(() => [
    {
      name: "Id",
      selector: row => row.id,
      accessor: "id",
    },
    {
        name: "Name",
        selector: row => row.firstName.lastName,
        accessor: "firstName.lastName",
    },
  ]);

  const [data, setData] = useState([]);
  useEffect(() => {
  async function getData() {
    await axios
      .get("https://dummyjson.com/users")
      .then((response) => {       
        setData(response.data);
        setLoadingData(false);
      });
  }
  if (loadingData) {
    getData();
  }
}, []);

  return (
    <div>
      
      <div className="w-full pt-5">
        {loadingData ? (
          <p className="w-full text-center">Loading... </p>
        ):(
        <DataTable
           columns={columns}
           data={data}
           selectableRows
           pagination
           paginationDefaultPage
          />
          )}
      </div>
      
      
    </div>
  );
}

Review this code

please check code and image and share your comment. thank you

Answer 1

I had this issue over the weekend and it turned out the data object path for one of the columns was incorrect, and because of that, the table was getting an undefined value for that column, and cannot call .slice() on a value that's not an array.