Material React Table, Fetching Data from API cannot read properties of null

Question

I use React-Material-Table and I try to fetch some data from API, however, some values are null and I get "Uncaught TypeError: Cannot read properties of null (reading 'name')" error.

1-How can I solve this problem? 2-May I have a default value or at least "?" somewhere in my code to check if it's a null value?

Here is my code :

import { useState, useEffect, useMemo, useRef } from "react";
import jwtDecode from "jwt-decode";
import MainCard from "ui-component/cards/MainCard";
import MaterialReactTable from "material-react-table";
import { getStockCardSearch } from "apis/StockCardApi";
import { useVirtualizer } from "@tanstack/react-virtual";

export default function StockCardList() {
  const [showLoader, setShowLoader] = useState(true);
  const [rows, setRows] = useState();
  const virtualizerInstanceRef = useRef(null);
  const [isLoading, setIsLoading] = useState(true);
  const [sorting, setSorting] = useState([]);
  const [search, setSearch] = useState({
    searchText: "",
    pageNo: 1,
    pageSize: 10,
    filter: {
      supplierId: null,
      accountId: null,
    },
  });

  const columns = useMemo(
    () => [
      {
        accessorKey: "stockCode",
        header: "Stok Kodu",
      },
      {
        accessorKey: "name",
        header: "Stok Adı",
        size: 450,
        maxSize: 550,
      },
      {
        accessorKey: "stockType.name",
        header: "Stok Tipi",
      },
      {
        accessorKey: "stockCardType.name", //BIZI PATLATAN SEY
        header: "Stok Kart Tipi",
      },
      {
        accessorKey: "unit.name",
        header: "Birim",
      },
      {
        accessorKey: "safetyStock",
        header: "Güvenlik Stoğu",
      },
      {
        accessorKey: "minimumStockQuantity",
        header: "Min Stok Miktarı",
      },
      {
        accessorKey: "maximumStockQuantity",
        header: "Max Stok Miktarı",
      },
      {
        accessorKey: "averageLeadTime",
        header: "Ortalama Temin Süresi",
      },
      {
        accessorKey: "manufacturerWarrantyPeriod",
        header: "Üretici Garanti Süresi",
      },
      {
        accessorKey: "saleWarrantyPeriod",
        header: "Satış Garanti Süresi",
      },
    ],
    []
  );

  let decoded = jwtDecode(localStorage.getItem("serviceToken"));
  const getStockCardList = async () => {
    setShowLoader(true);
    search.filter.accountId = decoded.accountId;
    search.filter.supplierId = decoded.supplierId;
    var response = await getStockCardSearch(search);
    setRows(response?.data?.data);

    setShowLoader(false);
  };

  useEffect(() => {
    if (virtualizerInstanceRef.current) {
      virtualizerInstanceRef.current.scrollToIndex(0);
    }
  }, [sorting]);

  useEffect(() => {
    getStockCardList();
    setTimeout(() => {}, 500);
  }, []);

  return (
    <MainCard>
      <h1 align="center">Stok Listesi Tablosu</h1>
      {rows?.length > 0 && (
        <MaterialReactTable
          columns={columns}
          data={rows}
          enableBottomToolbar={false}
          enableGlobalFilterModes
          enablePagination={false}
          enableRowNumbers
          enableGrouping
          enableRowVirtualization
          initialState={{ density: "compact" }}
          muiTableContainerProps={{ sx: { maxHeight: "600px" } }}
          virtualizerInstanceRef={virtualizerInstanceRef}
        />
      )}
    </MainCard>
  );
}

Answer 1

You should use the accessorFn function. See its documentation