Looping through enum in react typescript render gives error

Question

  interface ColorThemes {
    DEFAULT: string,
    DARK: string,
  }

  const colorThemes: ColorThemes = {
    DEFAULT: "default",
    DARK: "dark",
  }

  return (
    <div>
      {Object.keys(colorThemes).map(key =>
        <div>{colorThemes[key]}</div>
      )}
    </div>
  )

I'm trying to loop through an enum of strings. But visual studio intellisense complains and says:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'xxx'.
  No index signature with a parameter of type 'string' was found on type 'xxx'.

Any help would be appreciated.

Does this answer your question? stackoverflow.com/questions/52856496/… — Lin Du
– Lin Du, Commented Oct 9, 2021 at 2:49

kca · Accepted Answer · 2021-10-10 09:54:31Z

2

Object.keys(colorThemes) gives you a list of strings, but at colorThemes[key] the key must be a ColorThemes-key, not just any string.

But because you know for sure that every key is always a key of colorThemes, you can tell Typescript to assume that:

<div>
  {Object.keys(colorThemes).map(key =>
    <div>{colorThemes[key as keyof ColorThemes]}</div>
  )}
</div>

answered Oct 10, 2021 at 9:54

kca

6,2861 gold badge32 silver badges51 bronze badges

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

1 Comment

Mo D Genesis Over a year ago

Thank you kindly, sir, this is what I was looking for.

Collectives™ on Stack Overflow

Looping through enum in react typescript render gives error

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related