How to use an enum in typescript as a default prop value for a react component

Question

I have an enum file Themes.ts

export enum Themes {
    DEFAULT = 'default',
    DARK = 'dark'
}

And I want to use that enum as a default prop in a <Test/> component that looks like

export type TestProps = {
    children: ReactChild,
    theme?: Themes,
}

export const Test = ({ children, theme = Themes.DEFAULT }: TestProps) => {
    console.log(theme)
    return (
        <div className={`${theme}`}>
            <div>
                { children }
            </div>
        </div>
    )
}

The issue i'm seeing is that console.log(theme) is printing Themes.DEFAULT instead of default so the default value isn't being set properly. Is there anyway to use an enum to set this default theme value so that it will evaluate properly?

EDIT : What ended up working was setting a const to the enum values and then passing that into the props

const enumValue = Themes.DEFAULT
export const Test = ({ children, theme = enumValue }: TestProps) => {

Joshua McCarthy · Accepted Answer · 2021-07-20 15:13:53Z

5

Use string union types instead of enums. This way you keep the same type strength and your strings can be strings.

export type Themes = 'default' | 'dark';

Then in your component

export type TestProps = {
    children: ReactChild,
    theme?: Themes,
}

export const Test = ({ children, theme = 'default' }: TestProps) => {
    console.log(theme)
    return (
        <div className={`${theme}`}>
            <div>
                { children }
            </div>
        </div>
    )
}

If you try to assign anything besides 'default' or 'dark', the TS compiler will throw an error.

answered Jul 20, 2021 at 15:13

Joshua McCarthy

1,8771 gold badge10 silver badges6 bronze badges

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

2 Comments

user16488718 Over a year ago

This was useful, but not quite what I was looking for. Wanted to avoid hardcoding strings in code

Joshua McCarthy Over a year ago

It may look like it's just hard coding a string. But it's assigning one of two possible values accepted by this type. Just like your would if using enums.

Dmitriy Zhiganov · Accepted Answer · 2021-07-20 15:17:22Z

1

Everything looks right. I tried to reproduce it but everything works fine https://codesandbox.io/s/interesting-spence-kw3og?file=/src/App.tsx

answered Jul 20, 2021 at 15:17

Dmitriy Zhiganov

1,1371 gold badge7 silver badges15 bronze badges

1 Comment

José Neto Over a year ago

The same issue is happening with me. If I pass a ENUM as parameter, works. But, when the component uses the default value, not works, the error reported on this question happens.

Collectives™ on Stack Overflow

How to use an enum in typescript as a default prop value for a react component

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related