so i’m trying to write a component that renders all the fields in an object, however the object can be various types.

i.e

interface BakeryMenu {
    breads: string[]
    hotDrinks: string[]
    sandwiches:string[]
}

interface carServiceMenu {
    baseRate: string
    tires: string
    lights: string
}

and the menu renders as follows

const renderMenu = {props: BakeryMenu| carServiceMenu} => {
    //loop through the props and rendering it 
}

I want to have a generic type so that i don’t need to use the | symbol in the render component. I’m also wondering if it is good practice to use a generic type in a component.

I have written a generic type component for this. It looks something like

interface menu<T> {
    menu:T
}

const renderMenu = <T,>(props: menu<T>) => {
// loop through props and rendering it 
}

I’m actually a little confused with the syntax, can someone explain what does the <T,> mean in const renderMenu = <T,>(props: menu<T>) and what are we type defining with <T,> in front of the bracket like is it the component that we are type defining?