Typescript strict boolean expression error

Question

While creating conditional classes with the following lines of code:

className={({ selected }) =>
    classNames(
        selected
            ? 'bg-gray-100 text-gray-900'
            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
        'group flex items-center px-2 py-2 text-base font-medium rounded-md'
    )
}

But I keep getting a Type '({ selected }: { selected: any; }) => string' is not assignable to type 'string'.ts(2322) error.

I have tried explicitly adding an any type but it didn't work.

Because I also integrated eslint to my project, I even tried adding a eslint-disable-next-line @typescript-eslint/strict-boolean-expressions rule just above the selected parameter, all to no avail.

Please can anyone figure out what I am doing wrong?

Donut · Accepted Answer · 2021-11-07 01:19:04Z

2

What you're passing to the className prop is actually a function that takes a single argument, and then calls classNames to return a string. That's where this type is coming from:

({ selected }: { selected: any; }) => string

What you probably want to do instead is this (assuming that selected exists in scope):

className={
    classNames(
        selected
            ? 'bg-gray-100 text-gray-900'
            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
        'group flex items-center px-2 py-2 text-base font-medium rounded-md'
    )
}

That will set the className prop to the result of calling classNames, which is what you want - a string.

answered Nov 7, 2021 at 1:19

Donut

113k20 gold badges136 silver badges147 bronze badges

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

Collectives™ on Stack Overflow

Typescript strict boolean expression error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related