I would like to be able to solve this problem without having to disable estlint. And I would like to understand the reason for the error

const getMappedCard = (cardName: CardName) => {
  const mappedCards = {
    Mastercard: <Mastercard />,
    Visa: <Visa />,
    Hiper: <Hiper />,
    Amex: <Amex />,
    Hipercard: <Hipercard />,
    Elo: <Elo />,
    Jcb: <Jcb />,
    Diners: <Diners />,
  };

  
  return mappedCards[cardName] ?? <div>erro</div>; //error is here
};

const getMappedCard = (cardName: CardName) => {
  const mappedCards = {
    Mastercard: <Mastercard />,
    Visa: <Visa />,
    Hiper: <Hiper />,
    Amex: <Amex />,
    Hipercard: <Hipercard />,
    Elo: <Elo />,
    Jcb: <Jcb />,
    Diners: <Diners />,
  };

  // eslint-disable-next-line security/detect-object-injection
  return mappedCards[cardName] ?? <div>erro</div>;
};

CodePudding user response：

if you can write this :

type CardName = 'Mastercard' | 'Visa' | 'Hiper' | 'Amex' | 'Hipercard' | 'Elo' | 'Jcb' | 'Diners';

else say if mappedCards has all keys from CardName. I think you can live with the eslint-disable-next-line.

  return mappedCards[cardName as CardName] ?? <div>erro</div>;

Would fix it (which looks quite strange), but which could be understandable if eslint-security is applied after ts transformed to js.

CodePudding user response：

solve it by doing it differently :

const getMappedCard = (cardName: CardName) => {

switch (cardName) { case "Mastercard": return ; case "Visa": return ; case "Hiper": return ; case "Elo": return ; case "Amex": return ; case "Jcb": return ; case "Diners": return ; case "Hipercard": return ; default: return (

Erro

); } };