Discussion on: Create pokedex with react hooks

[Robert Gulewicz]

Btw, you can easily make it more type-safe:

const COLOR = {
  fire: '#FD7D24',
  water: '#4592C4',
  grass: '#9BCC50',
  electric: '#EED535',
  dragon: '#4A446A',
  dark: '#707070',
  psychic: '#F366B9',
  ice: '#51C4E7',
  flying: '#649BD4',
  bug: '#729F3F',
  fairy: '#FDB9E9',
  ground: '#704326',
  normal: '#A4ACAF',
  rock: '#A38C21',
  fighting: '#D56723',
  poison: '#B97FC9',
  ghost: '#7B62A3',
  steel: '#84B7B8',
};

export const getColor = (type: keyof typeof COLOR): string => {
  return COLOR[type] || COLOR.normal;
}; 

[Vladyslav]

You can do even better, just use enums:

export enum elementColor {
  bug = '#729f3f',
  dragon = '#53a4cf',
  fairy = '#fdb9e9',
  fire = '#fd7d24',
  ghost = '#7b62a3',
  ground = '#f7de3f',
  normal = '#a4acaf',
  pyschic = '#f366b9',
  dark = '#707070',
  electric = '#eed535',
  fighting = '#d56723',
  flying = '#3dc7ef',
  grass = '#9bcc50',
  ice = '#51c4e7',
  poison = '#b97fc9',
  psychic = '#792359',
  rock = '#a38c21',
  steel = '#9AA899',
  water = '#4592c4',
};

Then, just access it:

elementColor[type.name]