Column share same accessorKey

[yusuf8ahmed]

Hey Guys

I have these two column and I want them to use the same key in the data ("amount") but I keep on getting this error:

Warning: Encountered two children with the same key, amount. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

  {
    header: "Withdrawals",
    accessorKey: "amount",
    cell: ({ row }) => {
      console.log(row.getValue("amount"))
      const amount = parseFloat(row.getValue("amount"));

      if (amount < 0) {
        if (amount == 0) {
          return;
        }

        return <Money amount={amount} />;        
      } else {
        return;
      }

    },
    enableSorting: false,
    enableHiding: false,
  },
  {
    header: "Deposits",
    accessorKey: "amount",
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"));

      if (amount > 0) {
        if (amount == 0) {
          return;
        }

        return <Money amount={amount} />;        
      } else {
        return;
      }
    },
    enableSorting: false,
    enableHiding: false,
  },

[KevinVandy]

Multiple columns can have the same accessorKey, but they must have unique IDs. Just specify an id for them as a column option. They are inferred from the accessorKey by default.

[yusuf8ahmed]

Okay I did that and now I am getting this new error:

On this line const amount = parseFloat(row.getValue("amount"));
I am getting this error: [Table] Column with id 'amount' does not exist.

updated columns:

  {
    header: "Withdrawals",
    accessorKey: "amount",
    id: "withdrawal",
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"));

      if (amount < 0) {
        if (amount == 0) {
          return null;
        }

        return <Money amount={amount} />;        
      } else {
        return null;
      }

    },
    enableSorting: false,
    enableHiding: false,
  },
  {
    header: "Deposits",
    accessorKey: "amount",
    id: "deposit",
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"));

      if (amount > 0) {
        if (amount == 0) {
          return null;
        }

        return <Money amount={amount} />;        
      } else {
        return null;
      }
    },
    enableSorting: false,
    enableHiding: false,
  },

[KevinVandy]

Well, looks like you're trying to get a column that doesn't exist. Columns are identified by id.

[yusuf8ahmed]

So i should add a amount column? like this{ id: "amount" }

  {
    header: "Withdrawals",
    accessorKey: "amount",
    id: "withdrawal",
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"));

      if (amount < 0) {
        if (amount == 0) {
          return null;
        }

        return <Money amount={amount} />;        
      } else {
        return null;
      }

    },
    enableSorting: false,
    enableHiding: false,
  },
  {
    header: "Deposits",
    accessorKey: "amount",
    id: "deposit",
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"));

      if (amount > 0) {
        if (amount == 0) {
          return null;
        }

        return <Money amount={amount} />;        
      } else {
        return null;
      }
    },
    enableSorting: false,
    enableHiding: false,
  },
 {
   id: "amount"
  }

[ishaanw007]

have you solved the issue