Not able to use the Object.values function with an object in TypeScript

Question

I'm trying to make an array of values of all the keys inside an object using the Object.values(obj) function but it throws the following error:

No overload matches this call.
  Overload 1 of 2, '(o: { [s: string]: string; } | ArrayLike<string>): string[]', gave the following error.
    Argument of type 'SocialMedia | undefined' is not assignable to parameter of type '{ [s: string]: string; } | ArrayLike<string>'.
      Type 'undefined' is not assignable to type '{ [s: string]: string; } | ArrayLike<string>'.
  Overload 2 of 2, '(o: {}): any[]', gave the following error.
    Argument of type 'SocialMedia | undefined' is not assignable to parameter of type '{}'.
      Type 'undefined' is not assignable to type '{}'.ts(2769)

Here is the code, with the type of object:

{
  Object.values(data?.socialMedia).map((social) => (
    <div key={social} className="cursor-pointer">
      {renderSocial(social)}
    </div>
  ));
}

export type SocialMedia = {
  fb: string;
  insta: string;
  twitter: string;
};

I tried using explicitly using the data.?socialMedia as an object but it didn't work. I tried a workaround with a simple for loop but that does not work either.

data?.socialMedia can be undefined and Object.values cannot receive undefined — Woohaik
– Woohaik, Commented Nov 9, 2022 at 17:11
Please replace/supplement images of code/logs/errors with plaintext versions. — jcalz
– jcalz, Commented Nov 9, 2022 at 17:26

Youssouf Oumar · Accepted Answer · 2022-11-09 17:17:25Z

1

data?.socialMedia would give undefined if data is falsy. And Object.values() expect an object as a parameter; that's the error you are getting. You could fix it by doing so:

{data ? (
  Object.values(data.socialMedia).map((social) => (
    <div key={social} className="cursor-pointer">
      {renderSocial(social)}
    </div>
  ))
) : (
  <></>
)}

edited Nov 9, 2022 at 17:17

answered Nov 9, 2022 at 17:12

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

Collectives™ on Stack Overflow

Not able to use the Object.values function with an object in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related