How can I show the key in an object in mui-datatables?

Question

I tried defining it this way:

   {
      name: "colorList",
      label: "Color",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          {
            Object.entries(value).map(([key, value]) => {
              return key;
            });
          }
        },
      },
    },

And I will receive this error in the console.

Warning: Each child in a list should have a unique "key" prop.

If I'll console.log(value), I can see the data in the console.

  customBodyRender: (value, tableMeta, updateValue) => {
             console.log(value)
            },

How can I show the access they key and display it?

alexanderdavide · Accepted Answer · 2022-02-12 10:39:43Z

As the error

Warning: Each child in a list should have a unique "key" prop.

states, React requires children in an array to have a stable identity allowing React to identify which elements have been changed, added or removed during the component lifecycle. The identity is assigned to components with the key prop. The docs are very clear about this. In fact, it is recommended to use a string that is unique among all list siblings.

Assumed that the object keys, e. g. Black and Gold, are unique, you could do something along those lines to use them as component keys and also display them in the table:

    {
      name: "colorList",
      label: "Color",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return Object.entries(value).map(([key, value]) => {
            return <p key={key}>{key}</p>;
          });
        },
      },
    }

Collectives™ on Stack Overflow

How can I show the key in an object in mui-datatables?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related