Uncaught error: TypeError: data.map is not a function

Question

Could you please help me here? I want to map through a response object (example below). I don't have any errors in VSC but in browser there is an error: Uncaught error: TypeError: data.map is not a function

{
  "title":"some title",
  "info":"some info",
  "users":
  [
    {
      "id":1,
      "name":"name1",
      "surname":"surname1",
      "email":"email1",
    },
    {
      "id":2,
      "name":"name2",
      "surname":"surname2",
      "email":"email2",
    },
 ....
  ],
"resource":
{
  "url":"some url",
  "description":"some description"
  }
}

here is my interfaces:

export interface IUsers {
  id: number,
  name: string,
  surname: string,
  email: string
}

export interface IData {
  title: string,
  info: string,
  users: IUsers,
  resource: {
    url: string,
    description: string
  }
}

What i've got for now:

const { data } = DataAPI.useFetchAllDataQuery('')
...
{data  && data.map(item => item.users.map(user => (
 <User user={user} key={user.id}/>)))}

should i try data.users.map(...) --> property 'users' doesn't exist on type IData[].

May be it's because of the fact that 'data' is not an array, but i'm not sure how to use this construction Object.entries(data).map()...

Answer 1

Can you try doing something like this?

const { data } = await DataAPI.useFetchAllDataQuery('') // Assuming this is a promise
{data && data.users.map(user => (<User user={user} key={user.id}>))}

or maybe optional chaining

{data?.users?.map(user => (<User user={user} key={user.id}>))}