Question 254039 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    Instead of passing function to className, simply try this way

    <Tab
    className={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>

    Or if you want to pass function to className props, then try this way.

    <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"
    ))(selected)}
></Tab>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search