Object.keys Typescript Error

[matej-bittner]

Hi there,

After spending several hours trying to solve this problem, I haven't had much luck.

I'm trying to map data to a navigation menu, but I don't want to have to manually specify the number of links each time I add something new in the future.

In my 'en.json' file, I have the following data:
{ "Navigation": { "appName": "xxx", "userButton": "My Account", "NavLinks": { "0": { "title": "about", "link": "#" }, "1": { "title": "demo", "link": "#" }, "2": { "title": "pricing", "link": "#" } } } }

and my navigation component:

`
const t = useTranslations("Navigation.NavLinks");
const messages = useMessages();
const keys = Object.keys(messages.Navigation.NavLinks);

<ul>
  {keys.map((key) => (
    <li key={key}>
      <h2>{t(`${key}.title`)}</h2>
    </li>
  ))}
</ul>

`

.I'm encountering an error with the constant keys. The message says "Property NavLinks does not exist on type string or AbstractIntlMessages"

The only way I can get it to work without errors is by moving the NavLinks inside en.json to a separate object (outside of Navigation). However, this isn't a very elegant solution in my opinion. Thanks for any help!"