CODEWITHSUNDEEP
reactjstypescriptobjecttypes
Tomasz Waszczyk
Tomasz Waszczyk

Reputation: 3139

Iterate through object in React - "expression expected"

I have following source code:

export const LinksPure = (props: AllProps) => {
  const { t } = useTranslation();
  const { component } = props;

  return (
    <DetailsBox title={t('catalogPage.componentDetails.specs.links')}>
      {Object.keys(component?.external_links?).map((item, index) => {

      })}
    </DetailsBox>
  );
};

types for TypeScript:

export const ExternalLinks = Record({});
const SharedComponentDetailsFields = {
  id: Number,
  name: String.Or(Null),
  description: String.Or(Null),
  reference: String,
  manufacturer: String,
  integration_effort: Number,
  attachments: Attachments,
  prices: Prices,
  spec: String.Or(Null),
  task_id: Number.Or(Null),
  updated_at: String,
  notes: String.Or(Null),
  external_links: ExternalLinks,
  use_cases: Array(UseCase),
};

All I want to do is to iterate thorugh external_links field, but got error:

enter image description here

Any idea what I do wrong?

Upvotes: 1

Views: 751

Answers (1)

Snow
Snow

Reputation: 4097

You'd want to put the optional chain's question mark after the ), just before the . for the syntax to be valid, but you also can't call Object.keys on something that isn't defined. Object.keys will return an array or throw, so the optional chain for the .map isn't needed.

Try something like

{Object.keys(component?.external_links ?? {}).map((item, index) => {

})}

Upvotes: 2

Related Questions