So I'm very new to React and Typescript and have a simple question but cant seem to find an answer.
Im trying to use typescript to build a tab layout with headless ui following docs here
I am trying to use the prop on the component <Tab>
called selected
but am running into issues because selected is classed as void?
the code:
<Tab
className={({ selected }) => {
classNames(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
selected
? "bg-blue-50"
: "bg-blue-100"
);
}}
></Tab>
the typescript compiler error:
The expected type comes from property 'className' which is declared here on type 'IntrinsicAttributes & CleanProps<"button", TabPropsWeControl> & OurProps<"button", TabRenderPropArg> & { ...; } & { ...; }'
fairly sure that there is something wrong with how i am defining types but i dont even know how to find the type of selected
, P.S. the classNames() function takes in a string[]
and returns a string
ended up simply adding a return statement and it worked :(
<Tab
key={tab}
className={({ selected }) => {
return classNames(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
selected
? "bg-blue-50"
: "bg-blue-100"
);
}}
>
</Tab>