Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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

enter image description here

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

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>;
          });
        },
      },
    }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda