My code:interface Props { items: { id: Number; name: String; price: Number; }[]; } const Results = ({ items }: Props) => { console.log(items); if (items.length === 0) { return Å½Ã¡dnÃ© dÃly nenalezeny ; } return items.map((item) => {item.name} ); }; export default Results;Getting an typescript error:Type 'Number' is not assignable to type 'Key | null | undefined'Where is the issue ?

Error when trying to set a key when looping over an array

Unanswered

Giant Chinchilla posted this in #help-forum

Giant ChinchillaOP

2023-10-30T13:52:03.000Z

My code:

interface Props {
  items: {
    id: Number;
    name: String;
    price: Number;
  }[];
}

const Results = ({ items }: Props) => {
  console.log(items);
  if (items.length === 0) {
    return <span>Å½Ã¡dnÃ© dÃly nenalezeny</span>;
  }

  return items.map((item) => <div key={item.id}>{item.name}</div>);
};

export default Results;

Getting an typescript error:

Type 'Number' is not assignable to type 'Key | null | undefined'

Where is the issue ?

4 Replies

riský

2023-10-30T13:54:28.000Z

try making the number a string for the key (ie item.id.toSTring())

Shy Albatross

2023-10-30T15:55:16.000Z

return items.map((item) => <div key={`item-${item.id}`}>{item.name}</div>);

@riský try making the number a string for the key (ie `item.id.toSTring()`)

Giant ChinchillaOP

2023-10-31T10:43:49.000Z

This works, but when i tried passing a string as a key, the same error appeared, im a bit confused about why

Type 'String' is not assignable to type 'Key | null | undefined'