Type 'number' is not assignable to type 'string'.ts(2322)

Question

here is my code snippet

      {animals.map((animal: Array<any>, i: number) => {
        return <span  id={i} className={index === i ? "animal active" : "animal"} onClick={handleAnimalSelect}></span>;
      })}

error

(JSX attribute) React.HTMLAttributes<HTMLSpanElement>.id?: string
Type 'number' is not assignable to type 'string'.ts(2322)
index.d.ts(1760, 9): The expected type comes from property 'id' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'

Answer 1

You have declared i to be a number but the id must be a string. Change id={i} to id={i.toString()} and key={i} to key={i.toString()}.