CODEWITHSUNDEEP
typescriptreact-typescript
Viktor
Viktor

Reputation: 33

Property X doesn't exist on type Y

I have a component

<SecondaryItem
      type="dropdown"
      linkData={[
        { text: "О Вконтакте", url: "./" },
        { text: "Вакансии", url: "./" },
        { text: "Правовая информация", url: "./" },
        { text: "Защита данных", url: "./" },
        { text: "Центр безопасности", url: "./" },
        { text: "Помощь", url: "./" },
        { text: "Язык: русский", url: "./" },
      ]}
    />

But when I try to add types to it's props, it throws an error

interface Props {
  className?: string;
  type: "link" | "dropdown";
  linkData: { text: string; url: string }[];
}

export const SecondaryItem: React.FC<Props> = (props: Props): JSX.Element => {
  return (
    <li className={cn("secondary-item", props.className)}>
      <a className="secondary-item__link" href={props.linkData.url}>
        {props.linkData.text}
      </a>
    </li>
  );
};

It looks like so: Error

How can I solve it ?

Upvotes: 0

Views: 30

Answers (1)

axtck
axtck

Reputation: 3965

You typed linkedData as an array in your Props interface. If it is an array, handle it like an array (loop over it (props.linkedData.map(d => d.url)) or get a specific item (props.linkedData[0].url) to access the url or text.

If it is not an array, just update your interface.

interface Props {
  className?: string;
  type: "link" | "dropdown";
  linkData: { text: string; url: string }; // {}[] => {}
}

Upvotes: 1

Related Questions