We use reactjs and Typescript for development. In one of our components, we use two functions as below.

interface SysUser {
    id: number;
    name: string;
    group: string;
}

const getUsers = (userGroup: string): { listUsers: SysUser[] } => {

    let listUsers: SysUser[] = [];

    listUsers.push({ id: 1, name: "John", group: userGroup });
    listUsers.push({ id: 2, name: "David", group: userGroup });

    console.log("listUsersinFunction", JSON.stringify(listUsers));

    return { listUsers };

}

const showUsers = () => {
    let sysUsers = getUsers("SYS");
    console.log("listUsersafterFunction", JSON.stringify(sysUsers));

    //business logic

}

The console log inside getUsers is

listUsersinFunction [{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]

whereas the console log in showUsers is

listUsersafterFunction {"listUsers":[{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]}

The expectation is that both should be same. But the one in showUsers is totally different object. What are we doing wrong here?

Any help is appreciated. Thanks

We use reactjs and Typescript for development. In one of our components, we use two functions as below.

interface SysUser {
    id: number;
    name: string;
    group: string;
}

const getUsers = (userGroup: string): { listUsers: SysUser[] } => {

    let listUsers: SysUser[] = [];

    listUsers.push({ id: 1, name: "John", group: userGroup });
    listUsers.push({ id: 2, name: "David", group: userGroup });

    console.log("listUsersinFunction", JSON.stringify(listUsers));

    return { listUsers };

}

const showUsers = () => {
    let sysUsers = getUsers("SYS");
    console.log("listUsersafterFunction", JSON.stringify(sysUsers));

    //business logic

}

The console log inside getUsers is

listUsersinFunction [{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]

whereas the console log in showUsers is

listUsersafterFunction {"listUsers":[{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]}

The expectation is that both should be same. But the one in showUsers is totally different object. What are we doing wrong here?

Any help is appreciated. Thanks

• reactjs
• typescript

• 2 return { listUsers }; This is creating an object then returning it. If that's not your intention and you just want to return the array, do return listUsers;. On the other hand if it was intentional to create the object, but you only want to log the array, change your log to console.log("listUsersafterFunction", JSON.stringify(sysUsers.listUsers)); – Nicholas Tower Commented Jan 20 at 17:27
• You're modifying the return value by wrapping it in {} here: return { listUsers }; Thus your "after function" log has the extra object wrapper. – alttag Commented Jan 20 at 17:27
• If I remove the curly braces, I get the below error. Property 'listUsers' is missing in type 'SysUser[]' but required in type '{ listUsers: SysUser[]; }' – Developer Commented Jan 20 at 18:28

1 Answer 1

Modify the way you access the return value

const showUsers = () => {
    const { listUsers } = getUsers("SYS"); /* <-- modify how you access the return value from getUsers method */
    console.log("listUsersafterFunction", JSON.stringify(listUsers));

    //business logic

}

You are returning an Object in getUsers method. return { listUsers }. The return value which is an Object you would get something like {"listUsers":[{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]}.

Approach 1: Access listUsers array values, you can use Object destructuring like const { listUsers } = getUsers("SYS");

Approach 2: Modify the return statement in getUsers method as return listUsers;