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?
enum
, use um objeto simples:const Animal = { Cat: 1, Dog: 2, Hamster: 3 }
- typescriptlang.org/docs/handbook/enums.html#objects-vs-enumsas const
e pelo meu teste aqui já resolveu a questão de usar omap
.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.