MUI DataGrid --> Unsafe member access .value on an `any` when using params.value

71 views Asked by At

I get the below errors when trying to use valueFormatter in GridColDef with MUI's DataGrid. I'm still unclear as to why, and I'm not 100% sure on how to "fix" this issue.

    Unsafe member access .value on an `any` value.eslint@typescript-eslint/no-unsafe-member-access
    (parameter) params: GridValueFormatterParams<any>

React Component:

    ....
    interface ITransaction {
      date: Date;
      payee: string;
      account: string;
      group: string;
      category: string;
      notes: string;
      payment: number | null;
      deposit: number | null;
      id: number;
    }

    ....

    const rows = (accounts: IAccount[], accountView: string) => {
        const transactionList: ITransaction[] = [];
        let idCounter = 0;
        accounts.forEach((account, index) => {
          account.transactions.forEach((transaction) => {
            transactionList.push({
              date: formatDate(transaction.date),
              payee: transaction.payee,
              account: account.name,
              category: transaction.category,
              group: transaction.group,
              notes: transaction.notes,
              payment: transaction.payment,
              deposit: transaction.deposit,
              id: idCounter++
            });
          });
        });
        return transactionList;
      };

    ....

    const columns: GridColDef[] = [
        {
          headerName: "Date",
          field: "date",
          sortable: true,
          flex: 1,
          type: "date",
          valueFormatter: (params: GridValueFormatterParams) => dayjs(params.value as Date).format("DD/MM/YYYY")
        },
        { headerName: "Account", field: "account", sortable: true, flex: 1 },
        { headerName: "Payee", field: "payee", sortable: true, flex: 1 },
        { headerName: "Category", field: "category", sortable: true, flex: 1 },
        { headerName: "Group", field: "group", sortable: true, flex: 1 },
        {
          headerName: "Payment",
          field: "payment",
          sortable: true,
          flex: 1,
          align: "right",
          type: "number",
          valueFormatter: (params: GridValueFormatterParams) =>
            params.value ? `$${formatCurrency(params.value as number)}` : null
        },
        {
          headerName: "Deposit",
          field: "deposit",
          sortable: true,
          flex: 1,
          align: "right",
          type: "number",
          valueFormatter: (params: GridValueFormatterParams) =>
            params.value ? `$${formatCurrency(params.value as number)}` : null
        },
        { headerName: "Notes", field: "notes", sortable: false, flex: 2 }
      ];

The error is thrown everywhere param.value is mentioned. I've just added this rule below to ignore it for now, but would like to firstly understand what is wrong, and secondly know how to fix it if possible.

/* eslint-disable @typescript-eslint/no-unsafe-member-access */

0

There are 0 answers