Passing Generics to function component React Typescript

Question

I was just wondering if there is a way of handling this with generics than using any for the following.

I am still trying to wrap my head around the types and generics, just wanted to stay clear of using any. Or would this be an acceptable use case of using any !

SlotRenderer.tsx

// Can this be done ? 
interface SlotAProps<T> {
    slotData : T[]
}

// Should I stick with
interface SlotAProps {
    slotData : any[]
}

const SlotRenderer = (props: SlotAProps) => {
    return (
        <div>
            <p>Renders slot</p>
            // for version 1 I could do, currently this throws an error
            <p>{props.slotData[0]?.validity}</p>
            // for version 2 I could do, currently this throws an error
            <p>{props.slotData[0]?.totalPrice}</p>
        </div>
    )
}

The available types are

interface SampleOne {
    id: number;
    name: string;
    validity: string;
    isVisible: boolean;
}

interface SampleTwo {
    id: number;
    required: true
    sampleString: string;
    totalPrice: number;
}

The execution would be

// Version 1

const Container = () => {
    return (
        <ComponentBase
            // Passes a component to the Base component
            slot={<SlotRenderer<SampleOne> slotData={[{ id: 1, name:'', validity:'', isVisible:'' }]} />} 
        />
    )
}

// Version 2

const ContainerTwo = () => {
    return (
        <ComponentBase
            // Passes a component to the Base component
            slot={<SlotRenderer<SampleTwo> slotData={[{ id: 1, required:true, sampleString:'', totalPrice:10 }]} />} 
        />
    )
}

Sullen

Answer 1

The only thing you were missing is adding a type variable to the component function:

const SlotRenderer = <T extends unknown>(props: SlotAProps<T>) => {
  // ...
}

So the reason you weren't able to do so before is that you correctly defined the generic props type and know of the syntax for using generic components in tsx, but were not aware that you'd need this extra type variable to forward it to the generic props type.

The extends unknown in the above example is a hack to enable a type parameter in an arrow function in .tsx files, since otherwise the syntax is ambiguous with the opening tag of a component.

You can find more tips for working with typescript+react in the React TypeScript Cheatsheet project.

Vallecula

Awesome, thanks unknown fixed the type problems also I had to make some changes to implement the required logic. codesandbox.io/s/delicate-wildflower-6bt0j – Sullen

Unfortunately, it seems the trick doesn't work where the consuming component is also generic of type by-passed to the consumed component. – Slob

Answer 2

The issue with the accepted solution is that, at least on my computer, when you use the SlotRenderer with a concrete type, TypeScript will treat it as unknown.

My approach is to use a higher order component, like:

const createSlotRenderer = <T,>({someParam: T}) => {
    const SlotRenderer: React.FC<SlotAProps<T>> = props => {
        doSomethingWith(someParam);
        return <div>props.label</div>;
    };

    return SlotRenderer;
};

You would use it like:

const SlotRenderer = createSlotRenderer(someParam);
return <SlotRenderer {...{props}} />

The advantage is that in this version the component will use the concrete type of someParam and for instance if you have in your props some function which accepts an argument of type T, your component will call it with the actual type you used instead of unknown.

Lir