0

Estou usando React com Next e TypeScript e preciso fazer gerar um select com algumas espécies de animais, porém na hora de fazer o map para gerar as option's o compilador duplica os valores.

Por exemplo, tenho o seguinte enum (prefiro que comece com o índice 1), que uso o seguinte map para gerar os option's:

enum Animal {
  Cat     = 1,
  Dog     = 2,
  Hamster = 3
}

const getAnimalOptions = () =>
  Object.entries(Animal).map(([ value, key ]) => <option value={key}>{value}</option>)

Porém esse código me gera algo nesse sentido:

<option value=1       > Cat     </option>
<option value=2       > Dog     </option>
<option value=3       > Hamster </option>
<option value=Cat     > 1       </option>
<option value=Dog     > 2       </option>
<option value=Hamster > 3       </option>

Como podem ver, os valores do enum são duplicados de forma invertida. Eu acho que consegui contornar a situação mudando o número de cada enum para string, tipo assim:

enum Animal {
  Cat     = '1',
  Dog     = '2',
  Hamster = '3'
}

Dessa forma não duplica, porém acho meio feio (e não estou certo se é o correto). Outra solução que encontrei foi fazer um for .. of e sinalizar um break point:

const getAnimalOptions = () => {
  const options: any = [];
  const allAnimals = Object.entries(Animal);

  for (const [ idx, animal ] of allAnimals) {
    if (!isNaN(+animal))
      break;
    
    const option = <option value={idx}>{animal}</option>;
    options.push(option);
  }

  return options;
}

Está funcionando, mas não sei se é manutenível, além de que me incomoda trocar as duas linhas do map com arrow function por essas várias linhas do for .. of. rs

Sendo assim, alguém tem alguma solução melhor, por favor?

3
  • 1
    Em vez de enum, use um objeto simples: const Animal = { Cat: 1, Dog: 2, Hamster: 3 } - typescriptlang.org/docs/handbook/enums.html#objects-vs-enums
    – hkotsubo
    Commented 30/05/2023 às 12:11
  • @hkotsubo meu caro, obrigado pela sugestão. Não conhecia essa sintaxe de as const e pelo meu teste aqui já resolveu a questão de usar o map.
    – Diogo
    Commented 30/05/2023 às 13:57
  • Única “perda” aparente é que o enum me permite fazer assim { Cat = 1, Dog, Hamster }, onde numerar apenas a 1ª opção ele já numera as demais para mim. Mas enfim está tudo bem.
    – Diogo
    Commented 30/05/2023 às 14:01

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .