Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

152
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda