React TypeScript how to iterate through an object?

Question

This is specific for React.

I have an object like this:

interface Profile {
    name: string;
    title: string;
}

const NewPerson: Profile = {
    name: "John Smith",
    title: "Software Engineer"
}

And I'd like to return the key - value pair of that object in a React component like so:

function MyFunc() {
  return (
   <div>
    {
      Object.keys(NewPerson).map((key) => (
        <div>{key}: {NewPerson[key]}</div>
      ))
     }
    </div>
  )
}

However, I can access they key but not its value. I have this error:

TS: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Profile'. No index signature with a parameter of type 'string' was found on type 'Profile'.

I've tried to use Object.values and filter but cannot fix it.

Does this answer your question? Element implicitly has an 'any' type because expression of type 'string' can't be used to index — ecrb
– ecrb, Commented Apr 19, 2020 at 18:03
No, I don't think so. I've been reading the answer there but assigning keyof typeof in my case isn't an option. I only have 1 interface and 1 object. — Viet
– Viet, Commented Apr 19, 2020 at 18:11

dellink · Accepted Answer · 2020-04-19 18:13:33Z

9

try

interface Profile {
    name: string;
    title: string;
    [key: string]: string;
}
const NewPerson: Profile = {
    name: "John Smith",
    title: "Software Engineer"
}
function MyFunc() {
  return (
   <div>
    {
      Object.keys(NewPerson).map((key: keyof Profile) => (
        <div>{key}: {NewPerson[key]}</div>
      ))
     }
    </div>
  )
}

edited Apr 19, 2020 at 18:13

answered Apr 19, 2020 at 18:02

dellink

5493 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Viet Over a year ago

Thank you for your suggestion, but I got this error: ``` Argument of type '(key: "title" | "name") => JSX.Element' is not assignable to parameter of type '(value: string, index: number, array: string[]) => Element'. Types of parameters 'key' and 'value' are incompatible. Type 'string' is not assignable to type '"title" | "name"' ```

Afaq Ahmed Khan · Accepted Answer · 2024-02-14 11:26:12Z

5

What about using Object.entries combined with a map method, like this:

Object.entries(NewPerson).map(([key, value]) => {
   <div>{key}: {value}</div>
})

edited Feb 14, 2024 at 11:26

Afaq Ahmed Khan

2,3222 gold badges31 silver badges41 bronze badges

answered Apr 19, 2020 at 18:03

Ignacio Elias

5984 silver badges10 bronze badges

1 Comment

Viet Over a year ago

Thank you for your suggestion but forEach doesn't work in React.

David Buck · Accepted Answer · 2021-10-28 08:10:11Z

2

I had the same problem and resolved it like this:

Object.entries(NewPerson).map(([key, value]) => {
 <div>{key}: {value}</div>
})

edited Oct 28, 2021 at 8:10

David Buck

3,88840 gold badges54 silver badges74 bronze badges

answered Oct 28, 2021 at 8:01

Alexandre Gabrielli

213 bronze badges

Collectives™ on Stack Overflow

React TypeScript how to iterate through an object?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related