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

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?

CodePudding user response：

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>;
          });
        },
      },
    }