reactjstypescriptheadless-ui

Accessing props and their types on a Component


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


Solution

  • 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>